jQuery UI工具提示加载并延迟显示

debugcn 发表于 Dev

日瓦戈

该站点具有带有动态内容的工具提示链接。我正在使用jquery UI工具提示显示它们。我不希望每次用户不小心将光标停留在显示工具提示的链接上。我仅在将光标延迟链接几秒钟的情况下才显示工具提示。它应该像在Gmail中一样工作，当您将鼠标悬停在发件人姓名上时，您会看到有关他的信息（参见图片）。

我需要工具提示，用户可以与之交互，因此我使用此代码（感谢Antonimo https://stackoverflow.com/a/15014759/274417）

$( document ).tooltip({
  show: null, // show immediately 
  items: 'input',
  hide: {
    effect: "", // fadeOut
  },
  open: function( event, ui ) {
    ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
  },
  close: function( event, ui ) {
    ui.tooltip.hover(
        function () {
            $(this).stop(true).fadeTo(400, 1); 
            //.fadeIn("slow"); // doesn't work because of stop()
        },
        function () {
            $(this).fadeOut("400", function(){ $(this).remove(); })
        }
    );
  }
});

此处为示例（当鼠标悬停在带有工具提示的元素上时，您会看到所有这些混乱情况）

如何做得更好？使用超时？还是我应该使用hoverIntent插件？但是它将如何编码？

特雷弗

这是一种实现方法：

的HTML

<body>
    <p><label for="age">Your age:</label><input class="age" id="age" /></p>
    <p><label for="age">Your age:</label><input class="age" id="age2" /></p>
    <p><label for="age">Your age:</label><input class="age" id="age3"/></p>
    <p><label for="age">Your age:</label><input class="age" id="age4"/></p>
    <p><label for="age">Your age:</label><input class="age" id="age5"/></p>
</body>

jQuery的

var timeout;
var finishTimeout = false;
$(".age").tooltip({
  show: null, // show immediately 
  items: 'input',
  hide: {
    effect: "", // fadeOut
  },
     content: function(){
         if(!finishTimeout)
             return false;
         //ajax call here 
         return 'test';
     },
  open: function( event, ui ) {
    //ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
  },
  close: function( event, ui ) {
    ui.tooltip.hover(
        function () {
            $(this).stop(true).fadeTo(400, 1); 
            //.fadeIn("slow"); // doesn't work because of stop()
        },
        function () {
            $(this).fadeOut("400", function(){ $(this).remove(); })
        }
    );
  }
});
$('.age').mouseover(function(){
   var el = $(this);
    timeout = setTimeout(function(){
       finishTimeout = true;
       el.tooltip( "open" );
       finishTimeout = false;
    },1000);
});
$('.age').mouseout(function(){
    clearTimeout(timeout);
});

范例http://jsfiddle.net/4sSkc/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。