How to show a simple textbox when I hover over an

问题:

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"

回答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/

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

回答3:

See the jQuery hover event.

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

回答4:

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

from the same link as jjclarkson's answer