0

一直想找一个jquery tooltip效果但是找不到自己需要的，于是开始写/修改最简单/最接近的例子。单击页面上的任意位置应隐藏当前打开的工具提示，除非单击不同的工具提示，在这种情况下，当前打开的工具提示将关闭并打开新的工具提示。

目前单击页面上的任意位置没有任何反应，因为工具提示的显示存在问题。单击一个提示可以很好地显示它，单击下一个会关闭第一个并打开第二个，但是在此之后单击另一个工具提示时会显示一个空白框。

为什么会这样？

<!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>
4

1 回答 1

1

You need to add an event listener for a click to the body, using the event object, check the target if its your active tooltip, otherwise close the tooltip.

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

example: http://jsfiddle.net/xRNnP/

if you click anywhere the text will be hidden, if you click on the text itself nothing happens.

This can also be modified so that the target you are checking for is the link that triggers the tooltip, not the tooltip itself.

于 2012-09-19T01:28:38.003 回答