引导工具提示不适用于动态生成的行[重复]

Question

我有一个动态生成行的表。我必须将tooltip 添加到所有动态生成的行中的一个单元格中。 tooltip 适用于 <th></th>，但不适用于 <td></td>

这是我的桌子

<table>
  <thead>
    <tr><th id="table-head" data-toggle="popover" data-trigger="" data-content="Sample Tootlip">Table Head</th></tr>
  </thead>
<tbody>
<tr data-ng-repeat="item in Samplelist">
<td class="tableContent" data-toggle="popover" data-trigger="" data-content="Content Tootlip">{{item.value}}</td>
</tr>
</tbody>
</table>

这是 JQuery

$('.tableContent').popover({
                container: 'body',
                placement: 'left',
                trigger: 'hover'

            });
$('#table-head').popover({
                container: 'body',
                placement: 'left',
                trigger: 'hover'

            });

工具提示出现在<th></th> 但不在<td></td> 是不是因为它的动态怎么解决？

Answer 1

您的假设是正确的，因为行是动态创建的。所以当

.popover({...})

函数被调用。

解决方案：

你需要做的是调用，

.popover()

将鼠标悬停在元素上时的功能。

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

说明

当鼠标悬停在您的元素上时，检查是否已添加 data-toggle，如果尚未添加 .popover() 函数调用添加 data-toggle 并且调用 popover('show') 以在第一次悬停时实际显示项目。

在此之后，弹出功能应该在悬停时正常​​工作。

希望对您有所帮助。快乐编码。