Tooltip

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

Navbar Color Options

Layout Options

Sidebar menu Background


Sidebar Background Image
background image
background image
background image
background image

Try Layout Builder