引导工具提示延迟加载并显示答案

【问题标题】：Bootstrap tooltip lazy load with delay and show引导工具提示延迟加载并显示
【发布时间】：2014-04-25 21:25:22
【问题描述】：

我目前正在使用以下代码来初始化 Bootstrap 工具提示的延迟初始化版本。第一次悬停后，延迟方面一切正常，但在初始悬停时，它会立即显示。我知道这是因为$(this).tooltip('show'); 方法，但我不知道如何同时使用延迟和显示。我必须使用$(this).tooltip('show');，因为一旦悬停该元素就不会显示工具提示，除非我移出并重新进入。

$(element).on('hover', '.item', function () {
    matchup = ko.dataFor(this).Matchup;

    if (matchup) {
        if ($(this).attr('data-original-title') != '') {
            $(this).tooltip({ title: matchup.Title, html: true, delay: 1000 });
            $(this).tooltip('show');
        }
    }
});

更新答案

  $(element).on('mouseenter', '.item', function (e) {

               matchup = ko.dataFor(this).Matchup;

                if (matchup) {

                    if ($(this).attr('data-original-title') != '') {

                            $(this)
                                .addClass('tooltip-init')
                                .tooltip({ title: matchup.Title, html: true, delay: { show: 1000, hide: 0 } })
                                .trigger(e.type);
                }
            });

【问题讨论】：

标签： javascript jquery twitter-bootstrap twitter-bootstrap-tooltip

【解决方案1】：

尝试使用触发器

试试下面的代码

$(this).tooltip({ 
    title: matchup.Title, 
    html: true, 
    trigger: 'hover',
    delay:  delay: { show: 2000, hide: 3000 }
}).trigger('hover');

【讨论】：

没关系，但我使用了.trigger(e.type); 和e 可以从$(element).on('mouseenter', '.item', function (e) { 更新。感谢您的提示。

【解决方案2】：

我发现福尔摩斯回答使用延迟工作，但不可靠。在一系列项目中移动时，悬停似乎停止显示。在另一个导致这个jsfiddle by Sherbrow 的stackoverflow 答案的帮助下，我简化了代码并让它在this jsfiddle 中工作。简化代码如下：

var enterTimeout = false;
$('[rel="tooltip"]').tooltip({trigger:'manual'}).on('mouseenter', function() {
    var show = function(n) {
        enterTimeout = setTimeout(function(n) {
            var isHovered = n.is(":hover"); 
            if (isHovered) n.tooltip('show');
            enterTimeout = false;
        }, 750);
    };
    if(enterTimeout) clearTimeout(enterTimeout);
    show( $(this) );
});

$('[rel="tooltip"]').on('mouseout click',function() {
    $(this).tooltip('hide');
});

【讨论】：