1

私は現在、jquery用のほろ酔いプラグインを使用して軽量のツールチップを表示しています。ネストされていない要素に最適です。

私が持っているとしましょう：

<span>
    abc
    <span>def</span>
    ghi
</span>

各スパンタグにホバーイベントがあります。内側のスパンタグにホバーしようとすると、奇妙な結果が得られます。実際にホバーされた要素のみを表示したい。他には何もありません。

これどうやってするの？

4

5 に答える 5

4

Tipsyは、箱から出してすぐに機能するシンプルなプラグインとして設計されました。構成可能な設定がいくつかありますが、すべてのユースケースを網羅しているわけではありません。しかし、それはそれをいくらか拡張可能にする
api（）を提供します。APIを使用することで、独自のルールに基づいて （のような）動作を強制できます。$(el).tipsy(methodName)
show/hide

これが私がこの回避策を書く方法です：

$('span')
    // init tipsy
    .tipsy({
        title : function(){
            return $(this).data('tipsy-title');
        }        
    })
   // overwrite the triggering logic
   .on('mousemove', function(e){
       // prevent the event from bubbling up
       e.stopPropagation();

       // force a hide on other targeted elements (suchas the span parent)
       $('span').not(this).tipsy('hide');

       // force a show on this element (such as thespan parent)
       $(this).tipsy('show');
    });​

このフィドルをクリックすると、上記のコードの動作を確認できます。

更新
私はあなたのhtmlマークアップに合うようにコードを更新しました： 

var $tips = $('.backref_hover')
       .tipsy()
       .on('mousemove', function(e){
           // prevent the event from bubbling up
           e.stopPropagation();

           // force a hide on other targeted elements (such as the span parent)
           $tips.not(this).trigger('mouseleave');

           // force a show on this element (such as thespan parent)
           $(this).tipsy('show');
        });​

そして、これがオンラインデモです。

アップデート＃2 これは動的に追加されたスパンで動作するデモです：

$('.backref_hover').tipsy({live:true});

$('body').on('mousemove', '.backref_hover', function(e){
   // prevent the event from bubbling up
   e.stopPropagation();
   e.stopImmediatePropagation();

   // force a hide on other targeted elements (such as the span parent)
   $('.backref_hover').not(this).trigger('mouseleave');

   // force a show on this element (such as thespan parent)
   $(this).tipsy('show');
});

@Lindrian：コメントで私が言っていたのはそれだけでした（jQueryドキュメントから取得）：

jQuery 1.7以降、.live（）メソッドは非推奨になりました。.on（）を使用して、イベントハンドラーをアタッチします。

この例は、onの代わりにイベントを委任するために使用する方法を示していますlive。また、ここ
で実際に動作しているのを見ることができます。

于 2012-08-26T11:28:56.433 に答える
1

HTMLを制御する場合span、ツールチップが必要な特定の部分にマークを付けるのはどうですか？あなたはclassこうしてそれをすることができます：

<span>
    [unknown number of spans]
    <span class="use-tooltip" title="Backreference x: y">def</span>
    [unknown number of close spans]
</span>

プラグインの呼び出しは次のようになります。

$('.use-tooltip').tipsy();
于 2012-08-26T18:03:01.177 に答える
0

ねえ、あなたはこのようなことを試すことができます。

$(function(){   
    $('body').children('span').tipsy( 
    });​

それが機能するかどうかを確認してください..子を残してすべてのスパンタグを選択すると思います。

于 2012-08-26T18:10:20.100 に答える
0

私があなたの問題を理解したように、あなたはほろ酔いプラグインを修正することによってこれを解決することができます。パラメータに独自のカスタムオプションを追加できます（例hideParentTip: true）。

$('span span').tipsy({hideParentTip: true});

次に、プラグイン自体を変更する必要があります。行153では、の後に次のコードを配置する必要がありますfunction enter() {。つまり、次のようになります。

function enter() {
    if (options.hideParentTip) $(this).parent().trigger(eventOut);

それがお役に立てば幸いです。そうでない場合は教えてください

于 2012-08-19T08:23:55.823 に答える
0

しばらくの間、gion_13sソリューションを使用しました。しかし、より大きなデータセットのブラウザ/CPUには非常に厳しいことがわかりました。私は彼のコードに基づいて、より良い解決策を思いつきました：

    $('body').on('mousemove', '.backref_hover', function(e){
    // prevent the event from bubbling up
    e.stopPropagation();
    e.stopImmediatePropagation();

    // force a hide on other targeted elements (such as the span parent)
    $(this).parent().children('.backref_hover').not(this).trigger('mouseleave');

    // force a show on this element (such as thespan parent)
    $(this).tipsy('show');
});
于 2013-01-21T14:50:12.030 に答える