在鼠標懸停上應用工具提示

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