Tooltip is not working after append rows in table jquery

Question

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>");

That's because it have no event listeners because it's dynamically created. Check this [**link**](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) it might help! — ibrahim mahrir, Feb 05 '17 at 07:20
Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — ibrahim mahrir, Feb 05 '17 at 07:20
may be it duplicate. I need implementation. The exact solution — Rakesh Varma, Feb 05 '17 at 07:49

score 1 · Answer 1 · answered Jun 21 '17 at 10:19

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.

Tooltip is not working after append rows in table jquery

1 Answers1