如何使用jquery創建沒有插件的工具提示？

多年來，我使用了幾個不同的工具提示插件，但我認爲它成爲我自己編寫的時間。簡單地說，我並不是在尋找一個擁有所有選項的插件，因爲我知道我希望每一個彈出窗口的工具提示的外觀和行爲。大多數插件有一系列的動畫和位置可用，我認爲這對於我想創建的輕量級遊戲來說過多了，當然你的幫助:)如何使用jquery創建沒有插件的工具提示？

基本上，使用懸停的title屬性，我想要一個工具提示直接出現在元素上方並居中。

我知道如何填充將顯示的div，但我正在努力解決的是如何判斷div是否在元素上方直接定位。

理想情況下，這是用最少的代碼完成的。我從邏輯上說是這樣的（僞代碼）：

<html> 
<head> 

<style type="text/css"> 

    #myToolTip { display: none; } 

</style>

<script type="text/javascript"> 

$(document).ready(function() { 

    $('.hoverAble').hover(function(){ 

     var tip = $(this).attr('title'); 

     $('#myToolTip').html(tip).fadeIn(); 

    }, function() { 

     $('#myToolTip').fadeOut(); 

    } 

}); 
</script> 
</head> 
<body> 

<div id="myToolTip"></div> 

<div class="hoverAble" title="I am good at code"></div> 

</body> 
</html>

當然上面的代碼只是要填補工具提示，而不是相對於懸停元素定位。那是我的理解不足的地方。你能幫我嗎？

編輯：只是爲了澄清，我不想讓工具提示隨鼠標移動。

來源

2009-08-10 willdanceforfun

在你的代碼有錯誤就緒（函數（）{}）;支架缺失！ – 2009-08-10 12:57:19

tx爲那個約翰！ – willdanceforfun 2009-08-10 13:14:01

在jQuery的各種CSS functions看看，多offset()也許height() 。

// pseudocode, assuming #tooltip has position: absolute 
// do something similar with the left offset as well 
$('#tooltip').css({ top : $('#link').offset().top + 10 + 'px' });

這會將工具提示靜態地放在或靠近鏈接，我認爲這就是您要查找的內容。如果您希望工具提示隨鼠標移動，則需要動態更新mousemove事件中的位置。

來源

2009-08-10 12:41:07 deceze

我認爲就是這樣。現在看起來很明顯，看看那裏的css功能！ – willdanceforfun 2009-08-10 12:47:35

頂部似乎工作正常，但我的'左'屬性似乎沒有做任何事情：$（'＃tooltip'）。css（{top：$（this）.offset（）。top - 50 +'px '，left：$（this）.offset（）}）; - 有任何想法嗎？ – willdanceforfun 2009-08-10 13:20:30

'offset（）'返回一個帶有「top」和「left」屬性的對象，所以你必須使用'offset（）。left'。你是否也附加「px」？ – deceze 2009-08-10 13:34:55

沒有特定的代碼示例，你可以看看事件對象的內容（我假設你正在onmouseover事件上這樣做）。

這個你clientX和clientY屬性應該幫助

退房的事件對象以下內容：

http://www.javascriptkit.com/jsref/event.shtml

來源

2009-08-10 12:40:01

我認爲這可能對你有幫助。

<html> 
<head> 
<style type="text/css"> 
    #myToolTip { display: none;position:absolute; } 
</style> 
<script type="text/javascript" src='js/jquery.js'></script> 
<script type="text/javascript"> 

$(document).ready(function(){ 

    $('.hoverAble').hover(function(e){ 
     var left = mouseX(e); 
     var top = mouseY(e); 
     var tip = $(this).attr('title'); 

     $('#myToolTip').css('top',top); 
     $('#myToolTip').css('left',left); 
     $('#myToolTip').html(tip).fadeIn(); 


    }, function() { 

     $('#myToolTip').fadeOut(); 

    }) 

});

鼠標的位置：

function mouseX(evt) { 
if (evt.pageX) return evt.pageX; 
else if (evt.clientX) 
    return evt.clientX + (document.documentElement.scrollLeft ? 
    document.documentElement.scrollLeft : 
    document.body.scrollLeft); 
else return null; 
} 

function mouseY(evt) { 
if (evt.pageY) return evt.pageY; 
else if (evt.clientY) 
    return evt.clientY + (document.documentElement.scrollTop ? 
    document.documentElement.scrollTop : 
    document.body.scrollTop); 
else return null; 
} 
</script> 
</head>

HTML：

<body> 

<div id="myToolTip"></div> 

<div class="hoverAble" title="I am good at code">hi catch me</div> 

</body> 
</html>

來源

2009-08-10 12:52:12

對不起，我應該更具體。我不想讓鼠標移動，只是略高於當前元素。 – willdanceforfun 2009-08-10 13:14:42

<div title="This is tooltip">Hover Me</div>

這個簡單的提示是爲我工作。你可以添加任何類，使其時尚。

來源

2009-08-10 13:18:45 NAVEED

最容易使用的內置jQuery.UI工具提示之一。

$(document).tooltip();

而在HTML中所有的「標題」標籤的轉向工具提示...

<div class="juppiduppi" title="Here is a tooltip, just for you. ">Over here with the mouse... </div>

來源

2013-10-06 21:43:34 huncyrus

如何使用jquery創建沒有插件的工具提示？

回答

相關問題