Question

我在表格数据上使用了工具提示，如

和代码是

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

关于分页我是通过jquery填充数据，但是在添加行之后这个工具提示不起作用，这是我的javascript代码

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

Answer 1

这个针对boostrap工具提示的解决方案。

$('body').on('mouseenter', '.tableContent', function () {
if ($(this).attr('data-toggle') == 'tooltip')
{
    $(this).tooltip({
        container: 'body',
        placement: 'left',
        trigger: 'hover'
    }).tooltip('show');
}

}）;

解释

当鼠标悬停在元素上时，检查数据切换是否已添加，如果尚未添加，则调用.tooltip（）函数添加数据切换以及工具提示（＆＃ 39; show＆＃39;）被调用以在第一个悬停时实际显示该项目。

在表jquery中追加行后，工具提示无效

1 个答案: