如何在鼠标移动时隐藏 jQueryUI 工具提示

Question

我想在鼠标在目标上移动时隐藏 jQueryUI 工具提示，并且只在它在目标上静止时显示它。

我相信这是 windows 中工具提示的标准行为。

这怎么可能实现？

Answer 1

这不是 jQueryUI 工具提示的默认行为，因此您必须绕过它。经过一番思考，这是我的建议。您可以尝试使用阈值来查看最适合您的用例的阈值。

基本上，我的方法是，一旦工具提示打开，绑定将控制工具提示可见性的 mousemove 事件。工具提示关闭后，您将取消绑定 mousemove 处理程序。如果鼠标正在移动，控件将隐藏工具提示，或者检查鼠标是否停止移动（通过测量事件发生后经过的时间，在特定阈值内）并显示工具提示。这是带有适当注释的代码：

var isShown = false,              // flag indicating if the tooltip is currently shown
  animationTime = 400,            // show/hide tooltip animation time
  checkIfStoppedThreshold = 1000; // number of milliseconds before we check if the mouse has moved 

$('#target').tooltip({
  open: function(event, ui) {
    // number of moves before we start controlling the tooltip is used 
    // to take into account that the initial call to open will probably
    // also trigger the mousemove event, so we ignore it minMovesCount
    // number of times for the sake of user-friendliness.
    // If minMovesCount moves have happened, we can start controlling 
    // the tooltip and show it every time that the mouse stops moving.
    var minMovesCount = 15;
    $('#target').on('mousemove.mytooltip', function() {
      if (minMovesCount > 0) {
        minMovesCount--;
      } else if (!isShown) { 
        controlTooltip();
      }
    })
  },
  close: function(event, ui) {
    // unbind the mousemove handler since the tooltip is closed
    $('#target').off('mousemove.mytooltip');
  }
});

// called on each mousemove, after minMovesCount mousemoves have happened
function controlTooltip() {
  var tooltip = $('.ui-tooltip'),
    moveTime = Date.now(); // time of the mousemove event

  // hide the tooltip if its not already hidden
  tooltip.fadeOut(animationTime);

  // start the "timer until tooltip is shown"
  setTimeout(function() {

    var allowedPrecisionError = 20; // allowed error in the timing precision for checking mousemove time (in milliseconds)

    // elapsed milliseconds since the last mousemove event
    var elapsedTime = Date.now() - moveTime;

    // max milliseconds allowed to elapse after a mousemove
    var thresholdTime = checkIfStoppedThreshold + allowedPrecisionError;

    // if the current time is "almost identical" to the time when we 
    // started our timer, that means the mouse has stopped moving and 
    // we can show the tooltip 
    if (elapsedTime <= thresholdTime) {

      isShown = true;

      tooltip.fadeIn(animationTime, function() {

        // reset the isShown flag once the animation finishes
        isShown = false; 
      });
    }
  }, checkIfStoppedThreshold);
};

<script src="http://code.jquery.com/jquery-1.12.0.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/dark-hive/jquery-ui.css" />
<a href="#" id="target" title="Tooltip">Hover over me!</a>

Answer 2

我在阅读@nem 的 post:

后想出了这个解决方案

            var waitTime = 500 // milliseconds to wait with mouse still over target before showing tooltip
            $("*[title]").tooltip({
                open: function(event, ui) {
                    /**
                    * tooltip opens on hover
                    * if mouse is moving we start a timer to show tooltip after waitTime
                    */
                    var tooltipTimer = window.setTimeout(function () {$(this).show();}, waitTime);
                    $(this).on('mousemove.mytooltip', function() {
                        // if mouse moves over target, we 1) hide tooltip, 2) cancel the timer and 3) start a  new timer to show tooltip after waitTime
                        $('.ui-tooltip').hide();
                        window.clearTimeout(tooltipTimer);
                        tooltipTimer = window.setTimeout(function () {$('.ui-tooltip').show();}, waitTime);
                    })
                }
            });

如何在鼠标移动时隐藏 jQueryUI 工具提示

How to hide jQueryUI tooltip when mouse moves

javascript

jquery

jquery-ui

jquery-ui-tooltip