將jQuery用於工具提示

Question

我有一個帶有窗體的div。該表格很小，由一個或兩個下拉/文本框組成。我想知道做什麼需要做以下幾點：

• 當我點擊一個鏈接，工具提示彈出與它的形式。它出現在我點擊的鏈接的頂部，這樣當鼠標出現時，鼠標就在它的頂部。
• 當鼠標退出工具提示的邊界時，它會消失。

做一些谷歌搜索，我發現的所有工具提示示例出現在盤旋在給定的區域。我看到的所有jQuery彈出示例都是模態的，並強制用戶明確關閉它。

有沒有人知道一種方法，我可以有一個工具提示工作如上所述？

Answer 1

如果你找不到一個可以工作的插件，你所描述的實現起來非常簡單。

您只需將mousemove事件綁定到文檔，並檢查其目標或其目標的父母是否是您的工具提示。

這個例子適用於觸發按鈕，它緊挨着工具提示，但它可以用於直接觸發觸發器，因爲觸發器不會被徘徊。

$("#trigger").hover(function() { 
    // move the tool tip div into place 
    // show the tool tip 
}, function() {  
    $(document).bind('mousemove.tooltip', function (e) 
    { 
     if (e.target.id !== 'tooltip' && $(e.target).parents('#tooltip').length === 0) 
     { 
      // close tooltip 
      $("#tooltip").hide(); 
      $(document).unbind('mousemove.tooltip'); 
     } 
    }); 
}); 

這是一個基本的小提琴，它作爲描述：

http://jsfiddle.net/5h3Zy/5/

Answer 2

如果你想使用jquery UI插件使用一個對話框和功能，如下列：

$("#yourDialog").dialog({ autoOpen: false }); 

$("#yourLink").click(function(){ 
     $("#yourDialog").open(); 
}); 

$("#yourDialog").mouseover(function() { 
    }).mouseout(function(){ 
    $(this).close(); 
}); 

Answer 3

那麼我Creted的東西，我猜是你在哪裏後，看看

http://jsfiddle.net/hDcac/1/

該代碼有點亂，但你應該得到的想法。 :)

Answer 4

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#mylink').hover(function() { 
     $('#mytooltip').stop(true, true).fadeIn(); 
    }, function() { 
     $('#mytooltip').fadeOut(); 
    }); 
    $('#mytooltip').hover(function() { 
     $('#mytooltip').stop(true, true).fadeIn(); 
    }, function() { 
     $('#mytooltip').fadeOut(); 
    }); 
}) 
</script> 
<div id="mylink">My Link</div> 
<div id="mytooltip'">My Form</div> 

這會在每個元素上放置一個「懸停」事件。只要您的鼠標懸停在任一元素上，它就會調用「stop（true，true）」，從而防止fadeOut發生。一旦鼠標離開元素，工具提示就會消失。