How and Where to Use Bootstrap Popover ?

After twitter has introduced its silk, magnificent, efficient and easy to use front end framework called Bootstrap,  responsive and user friendly web designing has become like a cup of tea for a software engineer who carry a minimal knowledge regarding web designing.

In this article I will explore various ways to use a bootstrap Popover. Before we start exploring you must have a minimal idea regarding Bootstrap and its classes, functions etc. If you are new then here is the official Bootstrap link, where you can make yourself comfortable with this advanced front end framework.

If you need to check the popover related thing then here is the link

What is a Popover and why to use it ?

Popover is a modified version of tooltip, In Bootstrap basically popover comes with a title and a content section which looks like below.


Purpose to use Popover.

  • You may need a nice looking tooltip to show some information to the user on hover/click/focus of some element there you can use a popover, which will give a better user experience.
  • During form validation you can have a small right aligned popover saying what the user has done wrong with the field, so that he/she can rectify it further.
  • You can load the large/original image on hovering on a thumbnail inside a popover, which is a better idea instead of making the thumbnail click-able to show the large image.
These are some situations where a popover can be used. Now we will see how to use it and what are the way to use it.

 In Popovers you can show both text and HTML data, there is an attribute called "data-html" which needs to be set true in order to allow HTML contents in the popover by default it will take text as the default content.

How to Use Popover ?

There are 2 type of ways to use the bootstrap popovers
  • Using the data attributes of the element with which the popover is going to be attached.
  • By initializing it while triggering it from Jquery.
First we will check how to initialize it via data attribute.
Popover is not initialized automatically, you have to initialize it like $('#popOver').popover();
Initializing via data-attributes

Here are the data attributes need to be there in the element with which the popover is going to be attached.

Attribute Name Values Description
rel popover Says that element is attached with a popover.
data-placement top, bottom, left, right
Responsible for the floating location of the popover, choose it where you want to see the popover around the element.
data-trigger focus, click, hover
This attribute says when the popover will be presented like on click of the element, on focusing the element, or on hovering the element.
data-html true, false
If you want HTML content inside the popover then make it true or else make it false, by default it is false.
data-content text, html If you want only text to appear then give only text and if you want HTML then enter HTML by making the data-html attribute to true.
data-title text/ Title You can just set its value to "Title" which will show the original title of the element on the popover's title.
If you set the value any other text then the text will appear as the title of the popover rather

Find out the below demo on jsfiddle for initializing the popover via data-attributes

Live demo

Initializing via Jquery

Exactly the same attributes need to be parsed while calling the popover function jquery. Check it out below. Below demo has HTMLcontent in the popover.

Checkout the above jsfiddles and see how the data-attribute initialization and the jquery initialization works for popovers. Go ahead and do some random experiments and use this awesome bootstrap element wherever needed.

Happy Coding...

No comments:

Post a Comment