如何将弹出框添加到表格单元格？

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

表格单元格需要具有要在大多数浏览器中呈现的内容。一种解决方法是用不间断的空间填充它们。您可以在下面的代码中看到弹出框的工作原理，只需添加＆nbsp;实体作为元素的内容。

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>

Answer 2

尝试一下，希望对您有所帮助。谢谢

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

td {
  padding: 10px;
}

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<table border="1">
	<tbody>
	  <tr>
      <td></td>
      <td></td>
      <td style="background-color: red;" data-toggle="popover" data-content="IGOR" data-trigger="hover"></td>
      <td></td>
      <td></td>
      <td style="background-color: red;" data-toggle="popover" data-content="IGOR" data-trigger="hover"></td>
      <td></td>
      <td></td>
      <td style="background-color: red;" data-toggle="popover" data-content="IGOR" data-trigger="hover"></td>
      <td></td>
      <td></td>
    </tr>
	</tbody>
</table>
	

<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>