表格單元格上的jQuery工具提示

我正嘗試使用jQuery在表格單元格上創建簡單的工具提示。
我寫了這個代碼：表格單元格上的jQuery工具提示

<script type="text/javascript"> 
     $(function() { 

      $(".test").bind("mouseenter", function (e) { 
       $("#ToolTipDIv").offset({ left: e.pageX, top: e.pageY }); 
       $("#ToolTipDIv").show("slow"); 
      }); 
      $(".test").bind("mouseleave", function (e) { 
       $("#ToolTipDIv").hide("slow"); 
      }); 
     }); 

    </script> 
<div id="ToolTipDIv" style="background-color: Yellow; display: none; width: 20%;"> 
     This is a text 
    </div> 
    <table class="style1" border="1"> 
     <tr> 
      <td class="test"> 
       1 
      </td> 
      <td class="test"> 
       6 
      </td> 
     </tr> 
     <tr> 
      <td class="test"> 
       2 
      </td> 
      <td class="test"> 
       7 
      </td> 
     </tr> 
     </table>

但預期這是行不通的。當我將鼠標移過單元格Tooltip Div關閉並打開數次。
例如，我想查看第三個單元格的工具提示我將鼠標指針放在第一個和第二個單元格上以到達第三個單元格.jQuery工具提示將顯示並隱藏3次。
jsfiddle link

來源

2011-07-05 Shahin

這是因爲當你的新的div彈出，你的鼠標是「在」新的div你不再徘徊在舊的位置。我的建議首先是使用jQuery的懸停，而不是具體說明mouseenter等，然後看看插件hoverintent。但爲了解決您的問題，您需要將div的位置設置爲絕對。

來源

2011-07-05 04:54:56 kasdega

你能編輯我的小提琴嗎？ http://jsfiddle.net/DmnMQ/2/ – Shahin

根據定義，你的代碼將不起作用。當鼠標懸停在某物上時，你希望工具提示顯示出來，當你的鼠標離開時，工具提示會消失，但是，一旦工具提示彈出到鼠標位置，就意味着它會離開原來的位置。我創建了一個小提琴http://jsfiddle.net/DmnMQ/12/，以我要做的事情爲例，但如果無論如何我會嘗試使用現有的代碼來獲取jQuery工具提示。 – kasdega

非常感謝:) :)] – Shahin

我的建議是，提示可迅速出現，但消失快（小於用戶干擾）。所以，你的代碼將是：

$(function() { 
    $(".test").bind("mouseenter", function (e) { 
     $("#ToolTipDIv").offset({ left: e.pageX, top: e.pageY }); 
     $("#ToolTipDIv").show('normal'); 
    }); 
    $(".test").bind("mouseleave", function (e) { 
     $("#ToolTipDIv").hide(); //Note I removed 'slow' 
    }); 
});

而且，加position: absolute;風格的工具提示元素。

我已經更新了你的小提琴：http://jsfiddle.net/DmnMQ/3/，它運行正常。

希望這會有所幫助。乾杯

來源

2011-07-05 04:52:06

我檢查了你的小提琴。工具提示應顯示在鼠標位置。 – Shahin

所以你可以使用'mousemove'而不是'mousenter' –

-1

爲什麼不使用下面鏈接中的tiptip jquery插件，因爲它更簡單。

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

你可以用你的代碼的跨度內，像這樣，讓插件把剩下的事情。沒有重新發明輪子的意義。

<td><span class="tiptipClass" title="your tooltip text here">1</span></td>

來源

2011-07-05 04:53:00 Harindaka

我正在加載工具提示內容表單的AJAX請求。 – Shahin

你可以通過javascript無法輕鬆設置跨度的標題嗎？ – Harindaka

表格單元格上的jQuery工具提示

回答

相關問題