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"

Use `title` attribute on img or http://onehackoranother.com/projects/jquery/tipsy/ to make it fanicer — Detect, Aug 02 '12 at 16:19

Mindwin Remember Monica · Answer 1 · 2012-08-03T13:09:22.747

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

score 7 · Accepted Answer · answered Aug 02 '12 at 16:26

7

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/

answered Aug 02 '12 at 16:26

MJQ

1,778
6
34
60

For tooltip i see the browsers tool tip as well which is annoying, how do i remove that when i hover over – Haran Murthy Aug 02 '12 at 16:50
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! – MJQ Aug 02 '12 at 16:58
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. – MJQ Aug 02 '12 at 17:01
1

When I open it on firefox i dont see it, but it appears on IE – Haran Murthy Aug 02 '12 at 17:05
Check this! I tried it in firefox on JSFIDDLE, http://jsfiddle.net/tTFYC/7/ – MJQ Aug 02 '12 at 17:13
IE is always such a headache! Lemme try it there! – MJQ Aug 02 '12 at 17:17
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, http://jsfiddle.net/tTFYC/15/ – MJQ Aug 02 '12 at 17:27

score 3 · Answer 3 · answered Aug 02 '12 at 16:19

3

See the jQuery hover event.

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

answered Aug 02 '12 at 16:19

jjclarkson

5,890
6
40
62

score 1 · Answer 4 · answered Aug 02 '12 at 16:25

1

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

from the same link as jjclarkson's answer

answered Aug 02 '12 at 16:25

joevallender

4,293
3
27
35

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

4 Answers4

Linked