Like we did with Tooltips, we also need to update the JavaScript for this new component. Open up _layout.ejs again and insert the following line of code after the Tooltip JavaScript:

$("#popover-link").popover(); 

This code will initialize a Popover component on the element with the #popover-link ID on it. Once you've completed that, save both files and go to your browser. Find the link you created for the Popover and click it. This is what you should see in the browser:

As you can see, the Popover component has more to it than the Tooltip. It includes a title and content. You should use this component if you need to give more context than can be achieved through the use of a regular Tooltip.

Again, like Tooltips, it is possible to control the position of a Popover component. This is done in the same way by using the data-placement attribute on the link tag. Here's the code for each variation:

<p><a id="popover-link" data-placement="top" data-toggle="popover"  data-content="This is the content of my popover which can be longer than a tooltip">This is a popover</a>. Pellentesque habitant morbi...</p> 
 
<p><a id="popover-link" data-placement="bottom" data-toggle="popover"  data-content="This is the content of my popover which can be longer than a tooltip">This is a popover</a>. Pellentesque habitant morbi...</p> 
 
<p><a id="popover-link" data-placement="right" data-toggle="popover"  data-content="This is the content of my popover which can be longer than a tooltip">This is a popover</a>. Pellentesque habitant morbi...</p> 
 
<p><a id="popover-link" data-placement="left" data-toggle="popover"  data-content="This is the content of my popover which can be longer than a tooltip">This is a popover</a>. Pellentesque habitant morbi...</p> 

Since this works in exactly the same way as for Tooltips, I won't bother breaking it down any further. Simply include the data-placement attribute and give it one of the four positioning values to control where the Popover appears when clicked.

A Popover component can also be easily added to a button. Open up the index template again and insert the following button code:

<p><button type="button" id="popover-button" class="btn btn-primary" data-toggle="popover"  data-content="This is a button popover example">Popover Button</button></p> 

As you can see, this markup is very similar to the Tooltip button. Let's break it down again:

As with the previous examples, don't forget to update the JavaScript!

The last thing we need to do is update the JavaScript to initialize our new Popover button. Open up _layout.ejs and insert the following line of code after the Popover link JavaScript:

$("#popover-button").popover(); 

Once that is complete, save both files and open up the index page in your browser. Locate the button you inserted and click it. Your Popover should look like this:

As you can see, you now have a button with a Popover component attached to it. This can be useful for calling out something important with a button, and then once it has been clicked it reveals a message to your users. I have a couple more JavaScript components I would like to review with you; the next one is the Collapse component.