Bootstrap is offering one more interesting plugin which called Popover, this is similar to tooltip but with enhanced feature of heading. There is a very simple method to show bootstrap popover plugin, you simply need to hover your cursor over the element. Following method requires a tooltip.
If you want to implement functionality of this plugin individually, simple include the popover.js file along the other JS files. Else as we have discussed in the tutorial of Bootstrap Plugin Overview, you can include bootstrap.jsor the minified bootstrap.min.js.
Via data attributes
Use anchor or button tag with data-toggle=”popover” attribute to activate the popover. The title attribute of the anchor will be show in the popover and by default popover will show on the top.
Static popover examples
Four options are available: top, right, bottom, and left aligned.
Four Directions Examples
This example shows the use of popover plugin via data attributes.
||Data attribute name
|| Applies a CSS fade transition to the popover.
||Inserts HTML into the popover. If false, jQuery’s text method will be used to insert content into the dom. Use text if you’re worried about XSS attacks.
||Specifies how to position the popover (i.e., top|bottom|left|right|auto).
When auto is specified, it will dynamically reorient the popover. For example, if placement is “auto left”, the popover will display to the left when possible, otherwise it will display right.
||If a selector is provided, popover objects will be delegated to the specified targets.
||string | function
||The title option is the default title value if the title attribute isn’t present.
||Defines how the popover is triggered: click| hover | focus | manual. You may pass multiple triggers; separate them with a space.
||number | object
||Delays showing and hiding the popover in ms does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is:
||string | false
||Appends the popover to a specific element.
Example: container: ‘body’
These are some useful methods for popover:
||Initializes popovers for an element collection.
||Toggles an element’s popover.
||Reveals an element’s popover.
||Hides an element’s popover.
||Hides and destroys an element’s popover.
This example shows popover plugin methods:
Following mentioned list of events work with popover plugin.
||This event fires immediately when the show instance method is called.
||This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete)..
||This event is fired immediately when the hide instance method has been called.
||This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).
The following example demonstrates the Popover plugin events: