帶有手動觸發和選擇器選項的引導工具提示

Question

我有一個動態表，加載了ajax。當我將鼠標懸停在行上時，我想要顯示工具提示，但我希望工具提示出現在某個單元格（類別爲.name）上方，而不是整行上方。

此外，使用標題功能，我需要能夠獲得最近的行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; 
    } 
}); 

嘗試一：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'); 
    }); 

嘗試二：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'); 
    }); 

但我不知道在很大這樣一個解決方案的性能。所以，問題是如何做到這一點，做得更好？

Answer 1

這裏的問題是，當trigger設置爲manual時，您不能使用selector選項。 selector is used for delegation when bootstrap is handling the trigger events，但你明確表示你將是一個處理委派的人，所以它ignores the selector setting。

這意味着我們獲得什麼從代碼初始化前是這樣的：

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

Demo in js Fiddle

然而，這並不會在這種情況下，因爲我們要動態地生成提示工作。當我們在特定元素上調用.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語句check if it has already been initialized這樣的：

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

Demo in jsFiddle