带有手动触发器和选择器选项的 Bootstrap 工具提示

我有一个动态表，加载了ajax。我想当我将鼠标悬停在某个对象上时显示工具提示row，但我希望工具提示出现在某个特定的位置上cell（与类.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 中的演示 http://jsfiddle.net/tLs3G/

$('#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 中的演示 http://jsfiddle.net/tLs3G/1/

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

但我对这种解决方案的性能非常好奇。那么，问题是如何去做，并且做得更好？

这里的问题是你不能使用selector选项时trigger被设定为manual. The 当引导程序处理触发事件时，选择器用于委派 https://github.com/twbs/bootstrap/blob/0268b41c4f93e8f85c44a9ee2c8177c076c61ede/js/tooltip.js#L60，但你已经明确表示你将是处理委托的人，所以它忽略selector setting https://github.com/twbs/bootstrap/blob/0268b41c4f93e8f85c44a9ee2c8177c076c61ede/js/tooltip.js#L70.

这意味着我们获得nothing使用这样的代码进行预初始化：

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

js Fiddle 中的演示 http://jsfiddle.net/KyleMit/xpeLr/2/

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

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

$('#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 语句中检查是否已经初始化 https://stackoverflow.com/a/24982555/1366033像这样：

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

jsFiddle 中的演示 http://jsfiddle.net/KyleMit/xpeLr/