具有手动触发器和选择器选项的Bootstrap工具提示 [英] Bootstrap Tooltip with manual trigger and selector option

问题描述

我有一个动态表，里面装有ajax.当我将鼠标悬停在行上时，我想显示一个工具提示，但是我希望该工具提示出现在某个单元格(具有类.name)上，而不是上方整行.

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.

此外，使用标题功能，我需要能够获取最接近的行ID并返回自定义模板.

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

这是我的代码:

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

初始化:

$('#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;
    }
});

尝试一项: jsFiddle中的演示

Attempt One : Demo in 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');
    });

尝试两项: jsFiddle中的演示

Attempt Two : Demo in 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?

推荐答案

此处的问题是，当trigger设置为manual时，您不能使用selector选项. 选择器用于在引导程序处理触发事件时进行委派，但您已明确表示将成为一个处理委托，因此它忽略selector设置.

The problem here is that you can't use the selector option when trigger is 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 selector setting.

这意味着我们使用这样的代码进行预初始化不会获得任何好处:

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

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

它只是说我想在.child元素上设置工具提示，但是对此不做任何事情，因为我将在以后处理它.

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

这很好，那就是我们使用manual时无论如何想要做的.我们将决定显示或隐藏工具提示的时间.

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.

让我们看一个简单的例子:

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');

js Fiddle中的演示

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

Demo in 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?

在显示工具提示之前，立即进行即时初始化，如下所示:

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');

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

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 initialized like this:

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

这篇关于具有手动触发器和选择器选项的Bootstrap工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！