Bootstrap Tooltip con opzione trigger e selettore manuale

Question

Ho una tabella dinamica, caricata con ajax. Voglio mostrare un suggerimento quando passo il mouse su una riga , ma voglio che il suggerimento venga visualizzato su una determinata cella (con classe .name) anziché sopra l'intera riga.

Inoltre, utilizzando la funzione titolo, devo essere in grado di ottenere l'ID riga più vicino e restituire un modello personalizzato.

Ecco il mio codice:

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

inizializzazione:

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

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

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

Ma mi chiedo notevolmente sulle prestazioni di una tale soluzione. Quindi, la domanda è come farlo e farlo meglio?

Answer 1

Il problema qui è che non è possibile utilizzare l'opzione selector quando trigger è impostato su manual. Lo selector is used for delegation when bootstrap is handling the trigger events, ma hai esplicitamente affermato che sarai la sola delegazione di gestione, quindi è ignores the selector setting.

Ciò significa guadagniamo nulla dalla pre-inizializzazione con codice come questo:

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

Dice solo che voglio impostare i suggerimenti su .child elementi, ma non faccio nulla, perché io Lo manterrò più tardi.

Che va bene, questo è quello che volevamo fare comunque quando abbiamo usato manual. Saremo noi a dettare quando il tooltip è mostrato o nascosto. sguardo

Let a ciò che un semplice caso di che sarebbe simile:

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

Demo in js Fiddle

Tuttavia, questo non funzionerà in questo caso perché vogliamo generare dinamicamente le descrizioni dei comandi. Quando chiamiamo .tooltip('show') su un particolare elemento, bootstrap guarda quell'elemento per vedere se è stato inizializzato o ha un titolo. L'esempio sopra funziona perché ho un codice fisso in un titolo, ma come utilizzeremmo questo se volessimo inizializzare questo tooltip?

Proprio inizializzazione al volo, giusto prima di mostrare il tooltip, in questo modo:

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

in modo da non sostenere il costo di inizializzazione su ogni passaggio del mouse, si può avvolgere l'inizializzazione in un'istruzione if per check if it has already been initialized come questo:

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

Demo in jsFiddle