i have used tooltip on table data like
and code is
<tr>
<td class="text-center"><%=i %></td>
<td class="text"><span rel="tooltip" title="<%=client.getName() %>"><%=client.getName() %></span></td>
<td class="text"><span rel="tooltip" title="<%=client.getContactPerson() %>"><%=client.getContactPerson() %></span></td>
<td class="text"><span rel="tooltip" title="<%=client.getContactNumber() %>"><%=client.getContactNumber() %></span></td>
<td class="text"><span rel="tooltip" title="<%=client.getEmail() %>"><%=client.getEmail() %></span></td>
<td class="text"><span rel="tooltip" title="<%=client.getAddress() %>"><%=client.getAddress() %></span></td>
<td class="text"><span rel="tooltip" title="<%=client.getDepartment() %>"><%=client.getDepartment() %></span></td>
<td class="td-actions text-right">
</tr>
on pagination i am filling the data through jquery, but after adding rows this above tooltip is not working, here is my javascript code
clients.forEach(function(client){
$("#paginationTable tbody").append("<tr>"+
"<td class=\"text-center\">"+(i+1)+"</td>"+
"<td class=\"text\"><span rel=\"tooltip\" title=\""+client.name+"\""+">"+client.name+"</span></td>"+
"<td class=\"text\"><span rel=\"tooltip\" title=\""+client.contactPerson+"\""+">"+client.contactPerson+"</span></td>"+
"<td class=\"text\"><span rel=\"tooltip\" title=\""+client.contactNumber+"\""+">"+client.contactNumber+"</span></td>"+
"<td class=\"text\"><span rel=\"tooltip\" title=\""+client.email+"\""+">"+client.email+"</span></td>"+
"<td class=\"text\"><span rel=\"tooltip\" title=\""+client.address+"\""+">"+client.address+"</span></td>"+
"<td class=\"text\"><span rel=\"tooltip\" title=\""+client.department+"\""+">"+client.department+"</span></td>"+
"<td class=\"td-actions text-right\">"+
"<button type=\"button\" rel=\"tooltip\" title=\"View Profile\" class=\"btn btn-info btn-simple btn-xs\">"+
"<i class=\"fa fa-user\"></i>"+
"</button>"+
"<button type=\"button\" rel=\"tooltip\" title=\"Edit Profile\" class=\"btn btn-success btn-simple btn-xs\">"+
"<i class=\"fa fa-edit\"></i>"+
"</button>"+
"<button type=\"button\" rel=\"tooltip\" title=\"Remove\" class=\"btn btn-danger btn-simple btn-xs\">"+
"<i class=\"fa fa-times\"></i>"+
"</button>"+
"</td>"+
"</tr>");
This solution for boostrap tooltip.
$('body').on('mouseenter', '.tableContent', function () {
if ($(this).attr('data-toggle') == 'tooltip')
{
$(this).tooltip({
container: 'body',
placement: 'left',
trigger: 'hover'
}).tooltip('show');
}
});
Explanation
When the mouse hovers over your element a check is done whether the data-toggle has been added yet, if it has not been added the .tooltip() function is called adding the data-toggle and also the tooltip('show') is called to actually show the item on the first hover.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.