### Popovers

#### 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 `.popover-top` class for top popover along with `.popover` class.

##### 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 `.popover-right` class for right popover along with `.popover` class.

##### 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 `.popover-bottom` class for bottom popover along with `.popover` class.

##### 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 `.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 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).

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

#### Theme Customizer

Customize & Preview in Real Time

##### Menu Color Options

##### Layout Options

Collapsed Menu
Fixed Layout
Boxed Layout
Static Layout
Native Scroll
Right Side Icons
Bordered Navigation
Flipped Navigation
Collapsible Navigation
Static Navigation
Brand Center
Static Top

##### Navigation Color Options

###### Solid

Default
Primary
Danger
Success
Blue
Cyan
Pink

###### Gradient

Default
Primary
Danger
Success
Blue
Cyan
Pink
Default
Primary
Danger
Success
Blue
Cyan
Pink

### Solid

Default
Primary
Danger
Success
Blue
Cyan
Pink

### Gradient

Default
Primary
Danger
Success
Blue
Cyan
Pink
Default
Primary
Danger
Success
Blue
Cyan
Pink
Buy Now