4

サイトの特定のボタンにマウスを合わせるときに、ユーザーに指示するツールチップを表示したいと思います。基本的に、「has_tooltip」クラスのボタンにマウスを合わせると、ツールチップがアタッチされます。

$('.has_tooltip').live({
    mouseenter  : function(e) {
        if($('#tooltip_container').length > 0){
            $('#tooltip_container').remove();
        }

        var $t = $(this), text = $t.attr('rel'), left = e.pageX-25, top = e.pageY-25;
        if($t.attr('rev') === '1') {
            text += ' <span class="tooltip_warning">You must be <a href="/users/login" class="modal-dynamic">logged in</a> to make use of this.</span>'
        }
        $tooltip = $('<div id="tooltip_container">'+text+'</div>');
        $('body').prepend($tooltip);

        $tooltip.css({
            left: left+'px',
            top: top+'px'
        });

    },

});

また、ユーザーのカーソルが新しく作成されたツールチップボックスを離れると、カーソルが消えるはずです。

$('#tooltip_container').live({
    mouseleave : function(e){
        $(this).remove();
    }

});

ただし、「has_tooltip」クラスのボタン上でマウスを高速で移動するとツールチップが追加されますが、移動が速すぎてmouseleaveイベントをトリガーできません。

誰かが私がこれを修正する方法についていくつかのヒントがありますか？

4

1 に答える 1

2

'マウスがツールチップに入らない場合（ツールチップはマウスの下に表示されます）、ブラウザはmouseleaveイベントをトリガーしない場合があります。セレクターを追加することをお勧めします。これを試して：

$('#tooltip_container','.has_tooltip').live({
    mouseleave : function(e){
        $('#tooltip_container').remove();
    }
});

ただし、ツールチップメソッドからHTMLを削除することを強くお勧めします...空のdivを作成し、ツールチップのテキストと位置を表示するときに追加してみてください-DOMへの追加はできるだけ少なくしてください（非表示のdivを作成してください）ほとんどのツールチップHTMLで、必要に応じて実際のテキストコンテンツのみを変更します）。

理想的には、mouseenterはツールチップのテキストを置き換え、divを正しい位置で表示する必要があります。mouseleaveイベントは、ツールチップdivをhide（）する必要があります（後で作成して再度追加するために、DOMから削除しないでください）。

于 2012-08-03T18:06:34.103 に答える