4 Bootstrap popover examples with free code to learn and apply

The popover in Bootstrap

The Popover is a piece of content like tooltips or overlay content that can be added to any element as a source of secondary information or help to assist visitor of the website. For example, as you create an account in a website, while creating password you can show a user the requirements to create right password e.g. password must be 8 characters long, must contain a capital letter and a special symbol etc.

In Bootstrap, you can create popover quite easily by using the popover.js plugin. Bootstrap also requires including the tooltip.js plug-in to create popovers and ensure that tooltip.js is loaded before popover.js

If you just intend to use popover in your web project by using the Bootstrap framework you can only include popover.js plugin file. Otherwise, if you already included bootstrap.min.js or bootstrap.js to use other features then you do not need to include popover plugin separately.

Bootstrap popover example

Following is a basic example of creating a popover with Twitter Bootstrap V3. We are using bootstrap.min.js, so there is no need to include plugin files separately. As you click on the button the bootstrap popover will be shown. As such, this is popover toggle example you can click the button to show and hide the popover.

Experience this online

Popover with input password example

The following example creates a popover as your enter the cursor to the password text field. The popover will guide what are the requirements of creating a password. You might have noticed this type in many other websites while creating an account. For variation purpose, we have placed popover initialize code in the <head> section.

Experience this online

Example of setting position of popover by JavaScript

You can also set the position of popover by using the placement option in the data attribute or javascript. Following example uses four buttons with popover and displays popover on the top, right, left and bottom positions by using the JavaScript.

Experience this online

As you can see, by using $(“#bottompopover”).popover({placement : ‘bottom’}); popover will not only be shown but also you can specify its position. Note that, bottompopover is the id of the button. You can replace it by any name.

Example of setting position of popover by data attribute

You can also set the popover position by using the data attribute. The data attribute is set by data-placement=”position” where the position is set to left, right, bottom, top or auto.

Experience this online

Also see Twitter Bootstrap | Bootstrap Table | Bootstrap Form

Was this article helpful?

Related Articles

Leave A Comment?