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

Question

我有一个动态表,加载了ajax.当我将鼠标悬停在一行上时,我想显示工具提示,但我希望工具提示显示在某个单元格(带有类.name)上而不是整个行上方.

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

这是我的代码:

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

$('#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演示

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

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

Answer 1

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

这意味着我们从使用以下代码进行预初始化中获得的一切都没有:

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

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

哪个好,这就是我们在使用时想要做的事情manual.当显示或隐藏工具提示时,我们将成为指示的人.

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

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

在小提琴演示

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

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

$('#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语句中以检查它是否已经像这样初始化:

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

在jsFiddle演示