Question

我正在使用jquery的工具提示来显示标题和项目：

<a href="#" title="Delete" class="show-option" />

和JS：

$(function() {
$( ".show-option" ).tooltip({
    show: {
    effect: "slideDown",
    delay: 300
    }
});
});

问题是只要光标悬停在项目上，就会显示标题。但我想要的是一个标题，在光标在项目上方3秒后消失。

我一直在寻找一些解决方案，但没有任何效果，希望这是可行的。

Answer 1

尝试

$(function() {
    $( ".show-option" ).tooltip({
        show: {
            effect: "slideDown",
            delay: 300
        },
        open: function( event, ui ) {
            var timer = setTimeout($.proxy(function(){
                $(this).tooltip( "close" );
            },this), 3000);
            $(this).data('hidetimer', timer)
        },
        close: function( event, ui ) {
            clearTimeout($(this).data('hidetimer'))
        }
    });
});

演示：Fiddle

Answer 2

$( ".show-option" ).mouseover(function() {
   $( ".show-option" ).fadeOut('slow', function() {
     // Animation complete.
  }, 3000);
});

没有测试过，但应该给你所需要的东西。

Answer 3

你可以尝试这样的事情：

$( ".show-option" ).on('mouseover', function() { var that = this; setTimeout(function(){ $(that).tooltip( "close" ); }, 3000); });

这里有一个工作示例：http://jsfiddle.net/juaning/J9LSd/1/

PS：猜到你正在使用jqueryui

如何让项目的标题消失

3 个答案: