1

jQuery ビューティー ヒント( hoverIntent プラグインも使用) を使用しており、ツールヒント テキスト内に href リンクを表示して、ユーザーがリンクをクリックできるようにしたいと考えています。

ただし、アンカーを離れるとすぐに、タイムアウト (定義可能) 後にトゥーチップ テキストが消えます。

したがって、ユーザーカーソルがアンカーまたはツールヒントテキストの上にある限り、ツールヒントテキストを開いたままにしたいと思います。

どうやってやるの？出来ますか？私は成功せずに次のようなことを試みました：

$('.bt').bt({
postShow: function(box) {
  $(".bt-content").hoverIntent({
    timeout : 500,
    over: function() {
      $(".bt-wrapper").show(); //or $(".bt-active").btOn();
    }
  });
}
})
4

3 に答える 3

2

可能です。次のソリューションは、jQuery 1.7 と hoverIntent r5 を使用して機能します。Chrome、Safari、FF 3.7、FF 7、IE8 でテストしました。

$('.bt').bt({
    postShow: function(box) {
        $(box).hoverIntent({
            over: function() {
                    $(this).data('hasmouse', true);
            },
            out: function() {
                    $(this).data('hasmouse', false);
                    $(box).hide();
            },
            timeout: 300,
        });
    },
    hideTip: function(box, callback) {
        if ($(box).data('hasmouse')) {
            return;
        }
        $(box).hide();
        callback(); 
    },
});

今回は BeautyTip ボックスで再び hoverIntent を使用して、マウス コーサーがまだツールチップ上にホバリングしているかどうかを示すフラグ ("data-hasmouse") を設定しました。フラグが設定されている限り、新しい hideTip メソッドは何もしません。代わりに、独自の「hoverIntent out」が発生すると、BeautyTip ボックスは非表示になります。

于 2012-07-03T14:24:06.400 に答える
1

こんにちは、上記の返信をしてくれたChrisCinelliに感謝します。ただし、上記の解決策の問題は、アンカーから移動してもツールチップが残り、ページの外側をクリックするだけでツールチップが閉じられることです。

ただし、マウスオーバーでツールチップがポップアップすると、マウスアウトでもツールチップが表示されなくなるため、動作が不適切であるように見えます（マウスオーバーで動作が定義されている場合）。

そのため、その動作を実現するために、chriscinelliが提供するソリューションの動作に追加の変更を加えました。

解決 ：

ポップアップの外観が有効な外部コンテナにダミークラスtoolTipRangeを定義し、ショー後のイベントに次のコードを追加しました

$（ "。toolTipRange"）。bind（'mouseleave'、function（event）{
  if（event.relatedTarget.nodeName！= "CANVAS"）{
    that.btOff（）;
  }
}）;

于 2010-11-29T09:16:43.137 に答える
1

これは私がこれまでにできる最善のことです: ヒントのオプションにこれらのコードを追加してください。

trigger: ['mouseenter','click'],
postShow: function(box){
  var that = this;
  $(box).bind('mouseleave',function() {
     that.btOff();
  });
},

(少なくとも Firefox では) 動作しますが、hoverintent を使用することをお勧めします。

于 2010-11-19T01:46:21.623 に答える