Static demo

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

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