Rajeev Pentyala – Microsoft Power Platform

If you are new to Bootstrap, refer my previous article to get started with Bootstrap

In this article, lets see how to get Popover notifications in <table> control.

Bootstrap, displays popover notifications using “popper.min.js” file, which comes with Bootstrap ‘Starter Template’.

To create a popover (Popup) message, add the data-toggle=”popover” attribute to the HTML element.

• ‘title’ attribute to specify the header text of the popover
• ‘data-content’ attribute to specify the text that should be displayed inside the popover’s body

Sample HTML:

Below is my <td> tag of my ‘Name’ column of the table row with data-toggle=”popover”

<td>
<a href=”#” data-toggle=”popover” title=”About” data-content=”Rajeev Pentyala is from India”>Rajeev Pentyala</a>
</td>

In the tag, add below content:

$(document).ready(function () {
$(‘[data-toggle=”popover”]’).popover();
});

Add data-toggle=”popover” to all your ‘Name’ columns and the output will come as below:

🙂