在鼠标悬停上应用工具提示

Question

I'm putting an image on html5 canvas.

myString = '<img id="img1" class="link1" src = 'img/icon1.png'></img>';
            $('#main1' ).append(myString);
            $('#main1' + '-link1').fadeIn('slow'); 

            $(".link1").click(function () {
                window.location.href = url1;
            });

$(".link1").hover(function () {
                $('#myDiv').show();
            }, function () {
                $('#myDiv').hide();
            });

The div is :

<div id="myDiv" style="display:none;border: 1px solid black;width: 10px;height:5px;padding: 1px;">
    <p>Hello</p>
</div>

Now, on mouse hover the div appears at end of the page. I need it to appear just below the image. How can I achieve that?

Answer 1

That depends on the positioning of your 'myDiv' div.

You could just use the <img title="my tooltip text" /> if it's just text in your tooltip.

Answer 2

You can use pageX , pageY from event object to position the div on below the image .

Please try this link to get the solution http://jsfiddle.net/ZpGS3/14/ .

Answer 3

You may try a jQuery plugin called TipTip:

http://code.drewwilson.com/entry/tiptip-jquery-plugin

You'll see it's very easy to use and the design is quite great :).

You can go to the link and have a try to see if you like it or not.

Considering your example, in order to display the TipTip's tooltip, you'll simply have to do the following:

• Include TipTip's CSS and JS file references
• Put some JS: $("#img1").tipTip();
• Put your tooltip's content inside the title option of your image:

For example: <img id="img1" title="<p>Hello</p>"/>

Answer 4

To apply Tooltip on mouseover you should use

$('#img1').mouseover(function(){
$(this).attr('title','MY Image Title');
});