Advertisements
Home > Bootstrap > Bootstrap – Popover

Bootstrap – Popover

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:

bs_pop1

🙂

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: