0

jquery ツールチップ効果を見つけようとしましたが、必要なものが見つからなかったので、最も単純な/最も近い例を書き/変更し始めました。ページの任意の場所をクリックすると、現在開いているツールチップが非表示になります。ただし、別のツールチップがクリックされた場合は、現在開いているツールチップが閉じられ、新しいツールチップが開きます。

現時点では、ツールチップの表示に問題があるため、ページのどこをクリックしても何も起こりません。1 つのヒントをクリックすると問題なく表示され、次のヒントをクリックすると最初のヒントが閉じて 2 番目のヒントが開きますが、その後別のツールヒントをクリックすると空白のボックスが表示されます。

なぜこうなった？

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

イベントオブジェクトを使用してクリック用のイベントリスナーをボディに追加し、アクティブなツールチップの場合はターゲットを確認し、そうでない場合はツールチップを閉じる必要があります。

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

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

任意の場所をクリックするとテキストが非表示になり、テキスト自体をクリックしても何も起こりません。

これは、チェックしているターゲットがツールチップ自体ではなく、ツールチップをトリガーするリンクになるように変更することもできます。

于 2012-09-19T01:28:38.003 に答える