jquery - 第二次鼠标输入时显示 Bootstrap 工具提示

Question

所以我的 javascript.js 文件中有一个像这样的通用选择器:

$(document).on('hover', '*[rel=tooltip]', function(e){
    $(this).tooltip();
});

在我的 HTML 文件中，我的标签可能包含 rel='tooltip' 即:

<i class="icon-ban-circle" rel="tooltip" title="Ban" data-placement="bottom"></i>
<a rel="tooltip" title="hover for tooltip">Text</a>

此解决方案有效，但有一个警告。您必须再次将鼠标悬停在该元素上才能显示工具提示。我喜欢这样一个事实:我可以在 HTML 中添加 rel="tooltip" 和 title="some text" 并立即显示工具提示，并且想要保持这种便利。

我创建了一个 JSFiddle 来演示这个问题:http://jsfiddle.net/xKKMM/

Answer 1

尝试:

$(document).on({
    'mouseenter': function (e) {
        $(this).tooltip('show');
    },
        'mouseeleave': function (e) {
        $(this).tooltip('hide');
    }
}, '*[rel=tooltip]');

<强> Fiddle

您的情况仅在第一次悬停期间发生，它通过调用工具提示构造函数来设置工具提示。然后，当您将鼠标悬停时，它已经设置完毕，因此在悬停时会显示。您可以将设置与此结合起来。但这会在每次悬停时调用构造函数。所以你可以像这样立即这样做来避免它。

$('*[rel=tooltip]').tooltip();