How to Make Bootstrap 3 Popover

Bootstrap 3 popover is similar to the tooltip , bootstrap provided us a very nice popover and today we will going to learn how to make a popover

How to make a bootstrap 3 popover

to create a bootstrap 3 popover use a title which will be shown inside the popover and use data-content="Some content inside the popover" which will be shown inside the pop over here you can use HTML element also and data-toggle="popover" and the script described below

Example:

Toggle popover



Position Of Bootstrap 3 Popover

Bootstrap 3 popover have also 4 positions which is provided by twitter bootstrap and they are top, bottom, left, right and to make that use data-placement="top", data-placement="bottom", data-placement="left" and data-placement="top" accordingly.

Example:

Click
Click
Click
Click

Closing Bootstrap 3 Popovers

To create a closing button of bootstrap 3 popover use data-trigger="focus" in a popover.

Example:

Click me

Open Bootstrap 3 Popover on hover

To make a popover open in hover use data-trigger="hover" in a popover.

Example:

Hover over me

In this post, we have learned how to create Bootstrap 3 Popover hope the post helped you, please provide your comment to make the site better and more useful,

Thanks for reading

Share The Post On -

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.