Static demo

Four options are available: top, right, bottom, and left aligned.

Basic Top Popover
Popover on Top

Ice cream tootsie roll tiramisu tootsie roll toffee dragée sugar plum cake. Liquorice jelly jujubes. Powder danish tart apple pie dessert cheesecake tiramisu soufflé bonbon. Carrot cake wafer toffee.

Add placement="top" to add top popover.

Basic Right Popover
Popover on Right

Ice cream tootsie roll tiramisu tootsie roll toffee dragée sugar plum cake. Liquorice jelly jujubes. Powder danish tart apple pie dessert cheesecake tiramisu soufflé bonbon. Carrot cake wafer toffee.

Add placement="right" to add right popover.

Basic Bottom Popover
Popover on Bottom

Ice cream tootsie roll tiramisu tootsie roll toffee dragée sugar plum cake. Liquorice jelly jujubes. Powder danish tart apple pie dessert cheesecake tiramisu soufflé bonbon. Carrot cake wafer toffee.

Add placement="bottom" to add bottom popover.

Basic Left Popover
Popover on Left

Ice cream tootsie roll tiramisu tootsie roll toffee dragée sugar plum cake. Liquorice jelly jujubes. Powder danish tart apple pie dessert cheesecake tiramisu soufflé bonbon. Carrot cake wafer toffee.

Add placement="left" to add left popover.

Popover Positions

Four options are available: top, right, bottom, and left aligned.

Basic Top Popover

Add placement="top" to add top popover.

Basic Right Popover

Add placement="right" to add right popover.

Basic Bottom Popover

Add placement="bottom" to add bottom popover.

Basic Left Popover

Add placement="left" to add left popover.

Popover Events
Shown Event

This event is fired when the popover has been made visible to the user.

Hidden Event

This event is fired when the popover has finished being hidden from the user.

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.

Hide

Hides an element’s popover. Returns to the caller before the popover has actually been hidden.

Toggle

Toggles an element’s popover. Returns to the caller before the popover has actually been shown or hidden.

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 triggers="hover" for hover trigger.

Click

Use triggers="click" for click trigger. This is a default trigger.

Focus

Use triggers="focus" for focus trigger.

Manual

Use triggers="manual" for manual trigger. You can do show/hide using js

Popover Options

Supports HTML
This is HTML Popover Tart macaroon marzipan I love soufflé
apple pie
wafer. Chocolate bar jelly caramels jujubes chocolate cake gummies.

Useng-template for HTML supported trigger.

Popover Template

Base HTML to use when creating the popover. The popover's title will be injected into the .popoverTitle. .arrow will become the popover's arrow.The outermost wrapper element should have the .popover class.