jquery - 如何向表格单元格添加弹出框？

Question

实际上，我试图在悬停在弹出窗口内的单个单元格上显示一些数据。问题是我想做的是在 td 标记内添加数据切换，但它没有效果。

每个单元格看起来像这样:

<td style="padding: 0px; background-color: red;" data-toggle="popover" data-content="IGOR" data-trigger="hover"></td>

每个单元格的内容都是动态的。

显然是函数

    $(document).ready(function(){
$('[data-toggle="popover"]').popover({})   
});

在代码内部。

下表看起来像这样

Answer 1

表格单元格需要包含在大多数浏览器中呈现的内容。解决这个问题的一种方法是用不间断的空格填充它们。您可以在下面的代码中看到，弹出窗口只需添加   即可工作。实体作为 元素内容。

jQuery('[data-toggle="popover"]').popover({})   

table {
  border-collapse: collapse;
}

td {
 border: 1px solid #808080;
 min-width: 1ex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<table>
<tr><td>33</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>Tavolo 2</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>Tavolo 3</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>Tavolo 4</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>Tavolo 5</td><td></td><td></td><td></td><td style="padding: 0px; background-color: red;" data-toggle="popover" data-content="IGOR" data-trigger="hover">&nbsp;</td><td style="padding: 0px; background-color: red;" data-toggle="popover" data-content="IGOR" data-trigger="hover">&nbsp;</td><td style="padding: 0px; background-color: red;" data-toggle="popover" data-content="IGOR" data-trigger="hover">&nbsp;</td><td></td></tr>
<tr><td>Tavolo 6</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>Tavolo 7</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>