解释

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

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

时，DOM元素不存在

.popover({...})

函数被调用。

解决方案：

您需要做的是致电

.popover()

将鼠标悬停在元素上时

起作用。

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

解释

当鼠标悬停在元素上时，检查是否已添加数据切换，如果尚未添加 .popover（）功能被称为添加数据切换，并且还会调用 popover（＆＃39; show＆＃39;） 来实际显示项目第一次悬停。

在此之后，popover函数应该在悬停时正常工作。

希望它有所帮助。快乐的编码。

Bootstrap Tooltip不适用于动态生成的行

1 个答案:

解决方案：

解释