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的帖子后，我出来了这个解决方案：

            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工具提示

2 个答案: