jQuery 带有手动触发和选择器选项的 Bootstrap Tooltip

Bootstrap Tooltip with manual trigger and selector option

提问by Indy

I have a dynamic table, loaded with ajax. I want to show a tooltip when I hover the mouse over a row, but I want the tooltip to appear over a certain cell(with class .name) instead of above the entire row.

我有一个动态表，加载了 ajax。当我将鼠标悬停在一行上时，我想显示一个工具提示，但我希望工具提示出现在某个单元格（带有 class .name）而不是整行上方。

Also, using title function, I need to be able to get closest row id and return a custom template.

此外，使用 title 函数，我需要能够获得最接近的行 ID 并返回一个自定义模板。

Here is my code:

这是我的代码：

<table class="table" id="myTable">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Country</th>
            <th>Statistics</th>
        </tr>
    </thead>
    <tbody>
        <tr id="1">
            <td >1</td>
            <td class="name">Name #1</td>
            <td>United States of America</td>
            <td>100%</td>
        </tr>
        <tr id="2">
            <td >2</td>
            <td class="name">Name #2</td>
            <td>United States of America</td>
            <td>50%</td>
        </tr>
    </tbody>
</table>

Initialization:

初始化：

$('#myTable').tooltip({
    container: 'body',
    html: true,
    selector: 'td.name',
    trigger: 'manual',
    title: function() {
        // here will be custom template
        var id = $(this).parent().atrr('id');
        return id;
    }
});

Attempt One : Demo in jsFiddle

尝试一：jsFiddle中的演示

$('#myTable')
    .on('mouseenter focusin', 'tbody > tr', function() {
        $(this).find('td.name').tooltip('show');
    })
    .on('mouseleave focusout', 'tbody > tr', function() {
        $(this).find('td.name').tooltip('hide');
    });

Attempt Two : Demo in jsFiddle

尝试二：jsFiddle中的演示

var tip;
$('#myTable')
    .on('mouseenter focusin', 'tbody > tr', function() {
        tip = $(this).find('.offer-name');
        tip.tooltip(hereAllTooltipOptions);
        tip.tooltip('show');
    })
    .on('mouseleave focusout', 'tbody > tr', function() {
        tip.tooltip('hide');
    });

But I wonder greatly over the performance of such a solution. So, the question is how to do it and do it better?

但我非常想知道这种解决方案的性能。那么，问题是如何做到并做得更好？

回答by KyleMit

The problem here is that you can't use the selectoroption when triggeris set to manual. The selector is used for delegation when bootstrap is handling the trigger events, but you've explicitly said that you'll be the one handling delegation, so it ignores the selectorsetting.

这里的问题是您不能使用该selector选项 whentrigger设置为manual。在选择用于引导时，正在处理的触发事件代表团，但你已经明确说了，你会是一个处理代表团，所以忽略了selector设置。

This means we gain nothingfrom pre-initializing with code like this:

这意味着我们从像这样的代码预初始化中得不到任何好处：

$('.parent').tooltip({
    selector: '.child',
    trigger: 'manual'
})

It just says I want to set tooltips on .childelements, but don't do anything about it, because I'll be handling it later.

它只是说我想在.child元素上设置工具提示，但不要做任何事情，因为我稍后会处理它。

Which is fine, that's that what we wanted to do anyway when we used manual. We'll be the ones to dictate when the tooltip is shown or hidden.

这很好，这就是我们在使用manual. 我们将决定何时显示或隐藏工具提示。

Let's look at what a simple case of that would look like:

让我们看看一个简单的例子会是什么样子：

$('#myTable').on({
    'mouseenter': function() {
        $(this).find('td.name').tooltip('show');
    },
    'mouseleave': function() {
        $(this).find('td.name').tooltip('hide');
    }
},'tbody > tr');

Demo in js Fiddle

在 js Fiddle 中演示

However, this won't work in this instance because we want to dynamically generate tooltips. When we call .tooltip('show')on a particular element, bootstrap looks at that element to see if it has been initialized or has a title. The above example works, because I've hard coded in a title, but how would we use this if we wanted to initialize this tooltip first?

但是，这在这种情况下不起作用，因为我们想要动态生成工具提示。当我们调用.tooltip('show')特定元素时，bootstrap 会查看该元素以查看它是否已初始化或是否具有标题。上面的例子有效，因为我已经在标题中进行了硬编码，但是如果我们想先初始化这个工具提示，我们将如何使用它？

Just Initialize on the fly, right before you show the tooltip, like this:

只需在显示工具提示之前即时初始化，如下所示：

$('#myTable').on({
    'mouseenter': function() {
        $(this).find('td.name')
            .tooltip({
                container: 'body',
                html: true,
                trigger: 'manual',
                title: function() {
                    return this.parentNode.id;
                }
            }).tooltip('show');
    },
    'mouseleave': function() {
        $(this).find('td.name').tooltip('hide');
    }
},'tbody > tr');

So you don't incur the initialization cost on every hover, you can wrap the initialization in an if statement to check if it has already been initializedlike this:

因此，您不会在每次悬停时产生初始化成本，您可以将初始化包装在 if 语句中以检查它是否已经像这样初始化：

var $cell = $(this).find('td.name');
if (!$cell.data("bs.tooltip")) {
    $cell.tooltip({ /* options */ });
}
$cell.tooltip('show');

Demo in jsFiddle

jsFiddle 中的演示