Static demo

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

##### Basic Top Tooltip

Tooltip on Top

Add `placement="top"` to add top tooltip.

##### Basic Right Tooltip

Tooltip on Right

Add `placement="right"` to add right tooltip.

##### Basic Bottom Tooltip

Tooltip on Bottom

Add `placement="bottom"` to add bottom tooltip.

##### Basic Left Tooltip

Tooltip on Left

Add `placement="left"` to add left tooltip.

Tooltip Positions

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

##### Basic Top Tooltip

Add `placement="top"` to add top tooltip.

##### Basic Right Tooltip

Add `placement="right"` to add right tooltip.

##### Basic Bottom Tooltip

Add `placement="bottom"` to add bottom tooltip.

##### Basic Left Tooltip

Add `placement="left"` to add left tooltip.

#### Tooltip Events

##### Shown Event

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

##### Hidden Event

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

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

##### Hide

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

##### Toggle

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

#### 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 `triggers="click"` for click trigger.

##### Focus

Use `triggers="focus"` for focus trigger.

##### Hover

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

##### Manual

Use `triggers="manual"` for manual trigger.

#### Tooltip Options

##### Supports HTML

This is HTML tooltip

Use`ng-template` 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 `tooltipClass` for Custom tooltip. You can change tooltip color using custom class.

##### Custom Tooltip Text Color

Use `tooltipClass` for Custom tooltip. You can change tooltip text color using custom class.

##### Custom Tooltip Background & Text Color

Use `tooltipClass` for Custom bordered colored tooltip. You can change tooltip background and text color using custom class.