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

Question

我在html5画布上放置图像。

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

DIV的是：

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

现在，鼠标悬停在div出现在页面的结束。我需要它出现在图像下方。我怎样才能做到这一点？

Answer 1

这取决于你的'myDiv'div的定位。

如果只是工具提示中的文本，您可以使用<img title="my tooltip text" />。

Answer 2

您可以尝试一个jQuery插件叫做TipTip：

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

你会看到它是非常容易使用，设计是相当大的:)。

你可以去链接，并尝试看看你是否喜欢它。

考虑您的示例中，为了显示TipTip的提示，你只需要做到以下几点：

• 包括TipTip的CSS和JS文件引用
• 把一些JS：$("#img1").tipTip();
• 把你的工具提示的内容图像的title选项里面：

例如：<img id="img1" title="<p>Hello</p>"/>

Answer 3

在鼠标悬停工具提示申请，你应该使用

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

Answer 4

您可以使用pageX属性，pageY从事件对象定位在图像下方的股利。

请尝试此链接以获取解决方案http://jsfiddle.net/ZpGS3/14/。