Static demo
Four options are available: top, right, bottom, and left aligned.
Basic Top Popover
Ice cream tootsie roll tiramisu tootsie roll toffee dragée sugar plum cake. Liquorice jelly jujubes.
Add .popover-top class for top popover along with .popover
class.
Basic Right Popover
Ice cream tootsie roll tiramisu tootsie roll toffee dragée sugar plum cake. Liquorice jelly jujubes.
Add .popover-right class for right popover along with .popover
class.
Basic Bottom Popover
Ice cream tootsie roll tiramisu tootsie roll toffee dragée sugar plum cake. Liquorice jelly jujubes.
Add .popover-bottom class for bottom popover along with .popover
class.
Basic Left Popover
Ice cream tootsie roll tiramisu tootsie roll toffee dragée sugar plum cake. Liquorice jelly jujubes.
Add .popover-left class for left popover along with .popover
class.
Popover Positions
Four options are available: top, right, bottom, and left aligned.
Basic Top Popover
Add data-toggle="popover" & data-placement="top"
to add top popover.
Basic Right Popover
Add data-toggle="popover" & data-placement="right"
to add right popover.
Basic Bottom Popover
Add data-toggle="popover" & data-placement="bottom"
to add bottom popover.
Basic Left Popover
Add data-toggle="popover" & data-placement="left"
to add left popover.
Popover Triggers
Popover is triggered using - click | hover | focus | manual options. You may pass multiple triggers; separate them with a space. "manual" cannot be combined with any other trigger.
Hover
Use data-trigger="hover" for hover trigger.
Click
Use data-trigger="click" for click trigger. This is a default
trigger.
Focus
Use data-trigger="focus" for focus trigger.
Manual
Use data-trigger="manual" for manual trigger. You can do
show/hide using js
Popover Options
Disabled Animaition
Use data-animation="false" to remove fade animation. Default is
true.
Delay Show/Hide
Delay showing and hiding the popover (ms) - does not apply to
manual trigger type.
Supports HTML
Use data-html="true" for HTML supported trigger.
Popover Template
Base HTML to use when creating the popover. The popover's title will be
injected into the .popover-inner. .arrow will become the popover's arrow.The
outermost wrapper element should have the .popover class.
Popover Methods
This is considered a “manual” triggering of the popover.Popovers whose both title and content are zero-length are never displayed.
Show
Reveals an element’s popover. Returns to the caller before the popover has
actually been shown.(i.e. before the shown.bs.popover event occurs)
Hide
Hides an element’s popover. Returns to the caller before the popover has
actually been hidden (i.e. before the hidden.bs.popover event occurs).
Toggle
Toggles an element’s popover. Returns to the caller before the popover has
actually been shown or hidden (i.e. before the shown.bs.popover or hidden.bs.popover
event occurs).
Dispose
Hides and destroys an element’s popover. Popovers that use delegation cannot be individually destroyed on descendant trigger elements.
Popover Events
Show Event
This event fires immediately when the show instance method is
called.
Shown Event
This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).
Hide Event
This event is fired immediately when the hide instance method
has been called.
Hidden Event
This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).
