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

在您的情况下，只有在第一次悬停时才会通过调用tooltip构造函数来设置工具提示。然后当你悬停它时，它已经设置好，以便在悬停时显示。您可以将设置与此结合使用。但是这会在每次悬停时调用构造函数。所以你可以像这样立即做到这一点来避免它。

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

在第二个鼠标输入时显示Bootstrap工具提示

1 个答案: