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"

Solution 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/

Solution 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();
});

Solution 3

See the jQuery hover event.

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

Solution 4

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

from the same link as jjclarkson's answer

View more solutions