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

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

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

这是我的代码 ：

 
 
 
 
ID
 
Name
 
Country
 
Statistics
 
 
 
 
 
1
 
Name #1
 
United States of America
 
100%
 
 
 
2
 
Name #2
 
United States of America
 
50%
 
 
  

初始化 ：

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

这里的问题是当trigger设置为manual时，您不能使用selector选项。 选择器用于在引导程序处理触发器事件时进行委派 ，但是您明确表示您将是一个处理委托，因此它忽略了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'); 

js小提琴演示

但是，这在此实例中不起作用，因为我们想要动态生成工具提示。 当我们在特定元素上调用.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'); 

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

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

在jsFiddle演示