3

コードを更新しています...ほとんどの問題は解決しています。問題が残っています:

要素 (1 と 2) の間でマウスを速く動かすと、ツールチップが表示されません。

これは、要素のマウスを離すのが遅れているために発生すると思います。

$this.mouseleave(function (e) {
  tooltip.timer = setTimeout(function () {
    $("." + options.class).detach();
  }, !options.mouse || options.static ? options.delay || 0 : 0);
}), // Mouse leave

リンクが含まれている場合に、マウスがツールチップ上を移動できるようにしています。

アイデアは、マウスが別の要素の上に移動したときに非表示の遅延をキャンセルすることです。

プラグインはhttp://jsfiddle.net/mdmoura/RPUX6/でテストできます

そして、コード全体は次のとおりです。

(function ($) {

  $.fn.Tooltip = function (options) {

    var defaults = {
      class: 'Tooltip',
      content: '',      
      delay: 120,
      mouse: false,
      offset: [0, -20],
      static: true,
      effect: function ($element, $tooltip) {
        $tooltip.fadeIn(200);
      }      
    };

    options = $.extend({}, defaults, options);

    $(this).each(function (e) {
      var $this = $(this);
      var tooltip = { timer: null, title: $this.attr('title') };

      $this.mouseenter(function (e) {

        var $tooltip =
          $("<div>")
          .attr("class", options.class)
          .html(options.content !== '' ? (typeof options.content === 'string' ? options.content : options.content($this, $tooltip)) : tooltip.title)
          .appendTo('body');

        $this.attr('title', '');

        var position = [0, 0];

        if (options.mouse) {
          position = [e.clientX + options.offset[0] + $(window).scrollLeft(), e.clientY + options.offset[1] + $(window).scrollTop()];
        } else {
          var coordinates = $this[0].getBoundingClientRect();       
          position = [
            (function () {
              if (options.offset[0] < 0)
                return coordinates.left - Math.abs(options.offset[0]) - $tooltip.outerWidth() + $(window).scrollLeft();
              else if (options.offset[0] === 0)
                return coordinates.left - (($tooltip.outerWidth() - $this.outerWidth()) / 2) + $(window).scrollLeft();
              else
                return coordinates.left + $this.outerWidth() + options.offset[0] + $(window).scrollLeft();

            })(),
            (function () {
              if (options.offset[1] < 0)
                return coordinates.top - Math.abs(options.offset[1]) - $tooltip.outerHeight() + $(window).scrollTop();
              else if (options.offset[1] === 0)
                return coordinates.top - (($tooltip.outerHeight() - $this.outerHeight()) / 2) + $(window).scrollTop();
              else
                return coordinates.top + $this.outerHeight() + options.offset[1] + $(window).scrollTop();

            })()
          ];
        }

        $tooltip.css({ left: position[0] + 'px', top: position[1] + 'px' });

        options.effect($this, $tooltip.stop(true, true));

        $tooltip.mouseenter(function () {
          window.clearTimeout(tooltip.timer);
          tooltip.timer = null;
        }); // Tooltip enter

        $tooltip.mouseleave(function () {
          tooltip.timer = setTimeout(function () {
            $tooltip.remove();
          }, !options.mouse || options.static ? options.delay || 0 : 0);
        });

      }), // Mouse enter

      $this.mouseleave(function (e) {
        tooltip.timer = setTimeout(function () {
          $("." + options.class).remove();
        }, !options.mouse || options.static ? options.delay || 0 : 0);
      }), // Mouse leave  

      $this.mousemove(function (e) {
        if (options.mouse && !options.static) {
          $("." + options.class).css({ left: e.clientX + options.offset[0] + $(window).scrollLeft() + 'px', top: e.clientY + options.offset[1] + $(window).scrollTop() + 'px' });
        }
      }); // Mouse move
    }); // Each
  }; // Tooltip
})(jQuery); // JQuery

タイムアウトを使用して、マウスがツールチップ上を移動できるようにしています。

現在の問題を解決する方法を知っている人はいますか？

ありがとう！

4

7 に答える 7

2

このプラグインを試してみてください - jQuery Powertip

オプションを使用してツールチップを操作mouseOnToPopupできます。

$('#mouseon-examples div').powerTip({
    placement: 'e',
    mouseOnToPopup: true // <-- Important bit
});

"公式のjsFiddle デモで PowerTip をいじることもできます"

于 2013-04-19T15:30:27.103 に答える
0 
  $this.mouseleave(function (e) {
    setTimeout(function(){ ...

投稿のコードを忘れた可能性がありますが、タイムアウトの ID はどこにも保存されていないため、クリアできません。を書くことができますtimer = setTimeout(...。ここで、タイマーは次のように定義されています

 $(this).each(function () {     
   var $this = $(this),
       timer;

その後、簡単にクリアできます

 $tooltip.mouseenter(function (e) {
   clearTimeout(timer);
 });

そして、あなたの mouseleave ハンドラーは

 $tooltip.mouseleave(function (e) {
  $(this).remove(); //or $tooltip.remove();
 })
于 2013-04-21T17:00:07.067 に答える
0

やりたいこと。

ツールチップをトリガーする領域でのマウスオーバー/クリック イベントをリッスンします。あなたがしたその部分。

ツールチップ表示で、本体にグローバル イベント リスナーをバインドします。mousemove をリッスンし、ツールチップまたはトリガー要素内にあるかどうかを確認します。

そうでない場合は、ツールチップを非表示にして、グローバル イベント リスナーを削除します。

ちょっとした疑似コード

onShow: function(){
  $('body').off('mousemove');
  //might want to do _.debounce to make sure you dont trigger it to often
  $('body').on('mousemove', function(e){
     if(!$tooltip.has(e.target) && !$this.has(e.target)) {
       $tooltip.hide(); 
     }
  });
}

onHide: function(){
  //naturally you should be more careful with this 
  //and not just blindly remove all mousemose on the body
  //easy fixed by giving the event a unique id
  $('body').off('mousemove')
}
于 2013-04-24T16:27:58.897 に答える
0

私が言ったように、私はapaul34208を支持して、「人々がすでに遭遇し、コーナーケースについて考えた既存のプラグインを使用する」ことを提案します。この特定のプラグインではうまくいかないかもしれませんが、ツールチップ プラグインの量を考えると、必要なものが見つかるはずです。

そうは言っても：

あなたの問題は、関数.remove()が次のようなことをする必要があるときに、関数が体系的に呼び出すことですcheck if I should remove the tooltip, if yes do so。

function incrVisCounter($tooltip){
    var cnt = 1 + $tootltip.data('visCounter');
    $tootltip.data('visCounter', cnt);
}

function decrVisCounter($tooltip){
    setTimeout(function(){
        var cnt = $tootltip.data('visCounter') - 1;
        $tootltip.data('visCounter', cnt);
        if (cnt <= 0) {
            $tooltip.remove();
        }
    }, 300);
}


    $this.mouseenter(function (e) {
        displayTooltipIfNotShownAlready($this); //<- you will need to write some code here ...

        incrVisCounter( $('#tooltip') );
    });

    $this.mouseleave(function (e) {
        decrVisCounter( $('#tooltip') );
    });


    $tooltip.mouseenter(function (e) {
        incrVisCounter( $(this) );
    });

    $tooltip.mouseleave(function (e) {
        decrVisCounter( $(this) );
    });

$('.'+options.class).remove()ページ上のツールチップを削除します。特定のものだけをターゲットにする必要があります。

1つの提案:

var[編集]キーワードを忘れないでください...

 $this.mouseenter(function(){
     var $tooltip = ...

     $this.data('tooltip', $tooltip);
 });

 $this.mouseleave(function(){
     var $tooltip = $this.data('tooltip');
     setTimeout(function(){ $tooltip.remove() }, delay);
 });
于 2013-04-24T13:50:07.147 に答える
0

mouseleave 関数を次のように置き換えます。

    $(this).mouseout(function (e) {
       setTimeout(function(){
       $("#Tooltip").remove();
       }, 1000);
    }),

しかし、1 秒後には問題は同じで、ツールチップが消えてしまいます。

于 2013-04-15T15:03:04.723 に答える