CODEWITHSUNDEEP
jqueryhtmlbootstrap-4
NiceToMytyuk
NiceToMytyuk

Reputation: 4277

How to add a popover to table cell?

Actually I'm trying to show some data on single cell on hover inside a popover. The issue is that what I'm trying to do is to add the data-toggle inside the td tag but it is having no effect.

Each cell look's like this:

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

And the content is dynamic for each cell.

Obviously the function 

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

is inside the code.

The following table look's like something like this

enter image description here

Upvotes: 2

Views: 7663

Answers (2)

Hassan Siddiqui
Hassan Siddiqui

Reputation: 2845

Try this, i hope it'll help you out. Thanks

$('[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>

Upvotes: 0

Ralph Ritoch
Ralph Ritoch

Reputation: 3440

Table cells need to have content to be rendered in most browsers. One way to handle this is to fill them with a non-breaking space. You can see in the code below that the popover works by simply adding the &nbsp; entity as the <td> element content.

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>

Upvotes: 2

Related Questions