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.
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.
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.
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.
|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
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.