Comment affecter une valeur à l'info-bulle bootstrap-table?

Question

J'ai besoin d'attacher l'horodatage aux données de la table afin que l'heure à laquelle les données ont été modifiées puisse être affichée. Nous pouvons ajouter des données de chaîne à l'info-bulle comme la façon dont il est mentionné ici. http://jsfiddle.net/djhvscf/8vgk5626/14/

<td>Modules<a href="index.php?op=newtopic&amp;topic=2" data-toggle="tooltip" title="hover ME">HOVER ME</a> 

Mais je dois attacher une valeur variable à cette info-bulle. Comment puis je faire ça?

Answer 1

Vous pouvez définir une info-bulle dynamique en mettant à jour l'attribut title comme indiqué ci-dessous.

var sampleText = "Sample tooltip text"; 
$('[data-toggle="tooltip"]').attr('title', sampleText).tooltip('fixTitle'); 

$(function() { 
 
\t $('[data-toggle="tooltip"]').tooltip(); 
 

 
\t //Set dynamic title based on variable 
 
\t var sampleText = "Sample tooltip text"; 
 
\t $('[data-toggle="tooltip"]').attr('title', sampleText).tooltip('fixTitle'); 
 

 
\t $('[data-toggle="popover"]').popover(); 
 
\t $('#lst_art_adm').on('all.bs.table', function (e, name, args) { 
 
\t \t $('[data-toggle="tooltip"]').tooltip(); 
 
\t \t $('[data-toggle="popover"]').popover(); 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script> 
 

 
<table id="lst_art_adm" data-toggle="table" data-striped="true" data-search="true" data-show-toggle="true" data-mobile-responsive="true"> 
 
\t <thead> 
 
\t \t <tr> 
 
\t \t \t <th data-sortable="true">ID</th> 
 
\t \t \t <th>Titre</th> 
 
\t \t \t <th>Sujet</th> 
 
\t \t \t <th>Fonctions</th> 
 
\t \t </tr> 
 
\t </thead> 
 
\t <tbody> 
 
\t \t <tr> 
 
\t \t \t <td>14</td> 
 
\t \t \t <td align="left" width="80%">Un autre article <i>(archive)</i> 
 

 
\t \t \t </td> 
 
\t \t \t <td>NPDS<a href="index.php?op=newtopic&amp;topic=1" class="tooltip">NPDS</a> 
 
\t \t \t </td> 
 
\t \t \t <td>NA</td> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>13</td> 
 
\t \t \t \t <td align="left" width="80%"><a data-toggle="popover" data-trigger="hover" href="article.php?sid=13" data-content="If you sort the ID col or use search or toggle or resize ... i will not exist any more !!!" 
 
\t \t \t \t \t \t title="13" data-html="true" class="">test article</a> 
 
\t \t \t \t </td> 
 
\t \t \t \t <td>Modules<a href="index.php?op=newtopic&amp;topic=2" data-toggle="tooltip" title="hover ME">HOVER ME</a> 
 
\t \t \t \t </td> 
 
\t \t \t \t <td>NA</td> 
 
\t \t \t </tr> 
 
\t </tbody> 
 
</table>