Как добавить поповер в ячейку таблицы?

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>