Search code examples
jqueryhtmljsponmouseoverjquery-hover

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


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

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