如何让项目的标题消失

时间:2013-08-14 04:45:25

标签: jquery tooltip

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

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

和JS:

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

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

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

3 个答案:

答案 0 :(得分:2)

尝试

$(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

答案 1 :(得分:1)

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

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

答案 2 :(得分:1)

你可以尝试这样的事情:

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

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

PS:猜到你正在使用jqueryui