JQuery簡單的工具提示效果

我一直在試圖找到一個jQuery的工具提示效果，但找不到我需要的，所以我已經開始編寫/修改最簡單/最接近的例子。點擊頁面上的任何位置應該隱藏當前打開的工具提示，除非點擊了不同的工具提示，在這種情況下，當前打開的工具提示將被關閉，新的工具提示將被打開。JQuery簡單的工具提示效果

目前單擊頁面上的任何位置都不會執行任何操作，因爲顯示工具提示時出現問題。點擊一個提示可以很好地顯示，點擊下一個關閉第一個，然後打開第二個，但在此之後，當點擊另一個工具提示時，會顯示一個空白框。

這是怎麼發生的？

<!DOCTYPE html> 
<html> 

<head> 
<script type='text/javascript' src='jquery-1.6.2.js'></script> 

<style type='text/css'> 
    .tooltip{ 
     display:none; 
     padding:5px 10px; 
     background-color:#e5f4fe; 
     border:#5a5959 1px solid; 
     position:absolute; 
     z-index:9999; 
     color:#0c0c0c; 
     width:100px; 
     height:50px; 
    } 

</style> 

<script type='text/javascript'> 
    $(window).load(function(){ 
    $(document).ready(function() { 

    $('body').append('<div class="tooltip"><div class="tipBody"></div></div>'); 

    var tip; 

    $('a[title]').click(function(e) { 

     //display tip 
     tip = $(this).attr('title'); // tip = this title 
     $(this).attr('title',''); // empty title 
     $('.tooltip').fadeTo(300, 0.9).children('.tipBody').html(tip); // fade tooltip and populate .tipBody 

     //set position 
     $('.tooltip').css('top', e.pageY); 
     $('.tooltip').css('left', e.pageX); 

    }); 

    }); 

}); 

</script> 


</head> 
<body> 
    <a title="message1" class="printbtn" href="#">tip1</a> 
    <a title="message2" class="printbtn" href="#">tip2</a> 
</body> 
</html>

來源

2012-09-19 user1334130

您需要添加一個事件監聽器點擊身體，用事件對象，如果你主動提示檢查目標，否則關閉該提示。

$('body').on('click', function (e) { 
    if (!$(e.target).hasClass('tooltip')) { 
    // hide your tooltip 
    } 
});

例如：http://jsfiddle.net/xRNnP/

如果您任意位置單擊該文本將被隱藏，如果你點擊沒有反應的文本本身。

這也可以修改，以便您檢查的目標是觸發工具提示的鏈接，而不是工具提示本身。

來源

2012-09-19 01:28:38 Mark

JQuery簡單的工具提示效果

回答

相關問題