How to show a simple textbox when I hover over an icon using jquery

Question

I have an input field in a html and a help icon (?) next to the field, When I hover over the icon I want a simple text message to be displayed and the text message should disappear on hovering away. Any way to do this using jquery?

Icon will be a simple image say a small question mark. The text will be "Enter your name in the box"

Turtle

Use title attribute on img or onehackoranother.com/projects/jquery/tipsy to make it fanicer – Allay

Answer 1

You can use "tooltip" to travel the text with the mouse while it is on the icon,

Here is a good example.

http://www.alessioatzeni.com/blog/simple-tooltip-with-jquery-only-text/

This is also a good example, you can implement mouse out in a similar way!

http://api.jquery.com/mouseover/

Check this example too,

http://jsfiddle.net/DLQsX/

Cryptoanalysis

For tooltip i see the browsers tool tip as well which is annoying, how do i remove that when i hover over – Turtle

It is clearly mentioned in the example. In javascript at line $(this).data('tipText', title).removeAttr('title'); It removes the title so to prevent the window from showing its own tool tip or say title of the element. Check again! – Cryptoanalysis

What it is doing is creating a custom title that you want to display on mouseover and removing the title, so that window should not display the title of the element and your msg will be displayed. Then after the mouseover is over, it recovers the title. – Cryptoanalysis

When I open it on firefox i dont see it, but it appears on IE – Turtle

Check this! I tried it in firefox on JSFIDDLE, jsfiddle.net/tTFYC/7 – Cryptoanalysis

IE is always such a headache! Lemme try it there! – Cryptoanalysis

Simplest solution for that is just don't use the title for the icon you want to implement mouseover with. Here is what I mean, jsfiddle.net/tTFYC/15 – Cryptoanalysis

Answer 2

Create a DOM element on the fly, then position it fixed using the offset of the target element. You can attach the creation of the element on the mousein event, and the destruction on the mouseout event of the target element.

Assuming your target page element has an id myId:

Add this to your on ready function, or on a script tag after the myId element has been declared:

$('#myId').mouseenter(function(){
    $('body').append("<div id='hoveringTooltip' style='position:fixed;'></div>");
    $('#hoveringTooltip').html("MY TOOLTIP TEXT GOES HERE");
    $('#hoveringTooltip').css({
        "top" : $(this).offset().top + MYTOPOFFSET,
        "left" : $(this).offset().left + MYLEFTOFFSET
    });
});
$('#myId').mouseleave(function(){
    $('#hoveringTooltip').remove();
});

Agitator

Answer 3

See the jQuery hover event.

$("#help_icon").hover(function(){
    $("#msg_div").hide();
    $("#msg_div").show();
});

Nicosia

Answer 4

$("#help_icon").hover(
  function () {
    $("#msg_div").show();
  }, 
  function () {
    $("#msg_div").hide();
  }
);

from the same link as jjclarkson's answer

Trimolecular