### Tooltip

#### Static demo

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

##### Basic Top Tooltip

Tooltip on Top

Add `.top` class for top tooltip along with `.tooltip` class.

##### Basic Right Tooltip

Tooltip on Right

Add `.right` class for right tooltip along with `.tooltip` class.

##### Basic Bottom Tooltip

Tooltip on Bottom

Add `.bottom` class for bottom tooltip along with `.tooltip` class.

##### Basic Left Tooltip

Tooltip on Left

Add `.left` class for left tooltip along with `.tooltip` class.

#### Tooltip Positions

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

##### Basic Top Tooltip

Add `data-toggle="tooltip"` & `data-placement="top"` to add top tooltip.

##### Basic Right Tooltip

Add `data-toggle="tooltip"` & `data-placement="right"` to add right tooltip.

##### Basic Bottom Tooltip

Add `data-toggle="tooltip"` & `data-placement="bottom"` to add bottom tooltip.

##### Basic Left Tooltip

Add `data-toggle="tooltip"` & `data-placement="left"` to add left tooltip.

#### Tooltip Events

##### Show Event

This event fires immediately when the `show` instance method is called.

##### Shown Event

This event is fired when the tooltip 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 tooltip has finished being hidden from the user (will wait for CSS transitions to complete).

#### Tooltip Methods

This is considered a “manual” triggering of the tooltip. Tooltips with zero-length titles are never displayed.

##### Show

Reveals an element’s tooltip. Returns to the caller before the tooltip has actually been shown.(i.e. before the `shown.bs.tooltip` event occurs)

##### Hide

Hides an element’s tooltip. Returns to the caller before the tooltip has actually been hidden (i.e. before the `hidden.bs.tooltip` event occurs).

##### Toggle

Toggles an element’s tooltip. Returns to the caller before the tooltip has actually been shown or hidden (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs).

##### Dispose

Hides and destroys an element’s tooltip. Tooltips that use delegation cannot be individually destroyed on descendant trigger elements.

#### Tooltip Triggers

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

##### Click

Use `data-trigger="click"` for click trigger.

##### Focus

Use `data-trigger="focus"` for focus trigger.

##### Hover

Use `data-trigger="hover"` for hover trigger. This is a default trigger.

##### Manual

Use `data-trigger="manual"` for manual trigger. You can do show/hide using js

#### Tooltip Options

##### Disabled Animaition

Use `data-animation="false"` to remove fade animation. Default is true.

##### Delay Show/Hide

Delay showing and hiding the tooltip (`ms`) - does not apply to manual trigger type.

##### Supports HTML

Use `data-html="true"` for HTML supported trigger.

##### Tooltip Template

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

#### Tooltip Color Options

##### Custom Tooltip Backround Color

Use `data-popup="tooltip-custom"` for Custom tooltip. You can change tooltip color using `data-bg-color` attribute.

##### Custom Tooltip Text Color

Use `data-popup="tooltip-custom"` for Custom tooltip. You can change tooltip text color using `data-text-color` attribute.

##### Custom Tooltip Background & Text Color

Use `data-popup="tooltip-custom"` for Custom bordered colored tooltip. You can change tooltip background and text color using `data-bg-color` and `data-text-color` attributes.

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