Search code examples
jquerytwitter-bootstrapbootstrap-table

How to assign some value to bootstrap-table tooltip?


I need to attach timestamp to the table data so that the time when the data has been modified can be shown. We can add string data to tooltip like how it is mentioned here. 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>

But I need to attach a variable value to this tooltip. How can I do that?


Solution

  • You can set dynamic tooltip by updating title attribute as shown below.

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

    $(function () {
    	$('[data-toggle="tooltip"]').tooltip();
    
    	//Set dynamic title based on variable
    	var sampleText = "Sample tooltip text";
    	$('[data-toggle="tooltip"]').attr('title', sampleText).tooltip('fixTitle');
    
    	$('[data-toggle="popover"]').popover();
    	$('#lst_art_adm').on('all.bs.table', function (e, name, args) {
    		$('[data-toggle="tooltip"]').tooltip();
    		$('[data-toggle="popover"]').popover();
    	});
    });
    <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">
    	<thead>
    		<tr>
    			<th data-sortable="true">ID</th>
    			<th>Titre</th>
    			<th>Sujet</th>
    			<th>Fonctions</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>14</td>
    			<td align="left" width="80%">Un autre article <i>(archive)</i>
    
    			</td>
    			<td>NPDS<a href="index.php?op=newtopic&amp;topic=1" class="tooltip">NPDS</a>
    			</td>
    			<td>NA</td>
    			<tr>
    				<td>13</td>
    				<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 !!!"
    						title="13" data-html="true" class="">test article</a>
    				</td>
    				<td>Modules<a href="index.php?op=newtopic&amp;topic=2" data-toggle="tooltip" title="hover ME">HOVER ME</a>
    				</td>
    				<td>NA</td>
    			</tr>
    	</tbody>
    </table>