Metronic - Tailwind CSS Tooltip

Click the below toggle button to reveal the default tooltip example.

				
					<button class="btn btn-primary" data-tooltip="#default_tooltip">
 Toggle Tooltop
</button>
<div class="tooltip" id="default_tooltip">
 Hey, a delightful tooltip is here!
</div>

Use Tailwind CSS Transition classes to achieve smooth transitions for your tooltips' appearance.

Preview HTML

				
					<button class="btn btn-primary" data-tooltip="#transition_tooltip">
 Toggle Tooltop
</button>
<div class="tooltip transition-opacity duration-300" id="transition_tooltip">
 Sleek tooltip with opacity transition effect.
</div>

The tooltip content can consist of any HTML element, rather than being limited to simple text.

Preview HTML

				
					<button class="btn btn-primary" data-tooltip="#advanced_tooltip">
 Toggle Tooltop
</button>
<div class="tooltip" id="advanced_tooltip">
 <div class="flex items-center gap-1">
  Trial expires in 29 days
  <i class="ki-solid ki-information-5 text-lg text-warning">
  </i>
 </div>
</div>

Remove the default class


         tooltip

and utilize Tailwind CSS classes to completely customize the appearance and style of your tooltips.

Preview HTML

				
					<button class="btn btn-primary" data-tooltip="#custom_tooltip">
 Toggle Tooltop
</button>
<div class="hidden rounded-xl shadow-default p-3 bg-light border border-gray-200 text-gray-700 text-xs font-normal" id="custom_tooltip">
 Hey, this is a finely polished tooltip example.
</div>

Replace the default


         tooltip

class with


         popover

to transform a basic tooltip into a more comprehensive popover, featuring a heading and detailed content.

Preview HTML

				
					<button class="btn btn-primary" data-tooltip="#custom_popover" data-tooltip-trigger="click">
 Toggle Popover
</button>
<div class="popover max-w-72" id="custom_popover">
 <div class="popover-header">
  Popover Title
 </div>
 <div class="popover-body">
  Behold this captivating popover content. 
			It's quite engaging, wouldn't you say ?
 </div>
</div>

Use


         data-tooltip-placement

attribute with


         left

,


         right

,

top

,


         bottom

values control the tooltip display direction.

Preview HTML

				
					<button class="btn btn-light" data-tooltip="#tooltip_left" data-tooltip-placement="left">
 <i class="ki-outline ki-black-left">
 </i>
 Left
</button>
<button class="btn btn-light" data-tooltip="#tooltip_top" data-tooltip-placement="top">
 <i class="ki-outline ki-black-up">
 </i>
 Top
</button>
<button class="btn btn-light" data-tooltip="#tooltip_bottom" data-tooltip-placement="bottom">
 <i class="ki-outline ki-black-down">
 </i>
 Bottom
</button>
<button class="btn btn-light" data-tooltip="#tooltip_right" data-tooltip-placement="right">
 <i class="ki-outline ki-black-right">
 </i>
 Right
</button>
<div class="tooltip" id="tooltip_top">
 Tooltip positioned at the top.
</div>
<div class="tooltip" id="tooltip_bottom">
 Tooltip positioned at the bottom.
</div>
<div class="tooltip" id="tooltip_left">
 Tooltip positioned at the left.
</div>
<div class="tooltip" id="tooltip_right">
 Tooltip positioned at the right.
</div>

Enhance tooltip functionality by utilizing the


         data-tooltip-trigger

attribute with either


         click

or


         focus

to tailor tooltip activation to your preference. By default, tooltips are triggered on


         hover

.

Preview HTML

				
					<button class="btn btn-light" data-tooltip="#tooltip_hover" data-tooltip-trigger="hover">
 Hover(default)
</button>
<button class="btn btn-light" data-tooltip="#tooltip_click" data-tooltip-trigger="click">
 Click
</button>
<button class="btn btn-light" data-tooltip="#tooltip_focus" data-tooltip-trigger="focus" tabindex="0">
 Focus
</button>
<div class="tooltip" id="tooltip_hover">
 I am triggered by hover.
</div>
<div class="tooltip" id="tooltip_click">
 I am triggered by click.
</div>
<div class="tooltip" id="tooltip_focus">
 I am triggered by focus.
</div>

Use


         data-tooltip-offset="20px,20px"

attribute to add distance between the toggle and tooltip element. The pair of

x,y

value in pixel translates the floating element along the x and y axes.

Preview HTML

				
					<button class="btn btn-primary" data-tooltip="#offset_tooltip" data-tooltip-offset="20px,20px">
 Toggle Tooltop
</button>
<div class="tooltip" id="offset_tooltip">
 Tooltip with custom offset.
</div>

Set custom delay timeouts for displaying and hiding tooltips using the


         data-tooltip-delay-show="1000"

and


         data-tooltip-delay-hide="1000"

attributes, specified in milliseconds. The below examples shows and hides the tooltip with 1000ms(1 second) delay.

Preview HTML

				
					<button class="btn btn-primary" data-tooltip="#delay_tooltip" data-tooltip-delay-hide="1500" data-tooltip-delay-show="1500">
 Toggle Tooltop
</button>
<div class="tooltip" id="delay_tooltip">
 Tooltip with custom offset.
</div>

Use the


         data-tooltip-permanent="true"

attribute to set tooltips remain persistent and do not close when clicked outside. This feature is exclusive to tooltips triggered by clicking, specified with


         data-tooltip-trigger="click"

.

Preview HTML

				
					<button class="btn btn-primary" data-tooltip="#permanent_tooltip" data-tooltip-permanent="true" data-tooltip-trigger="click">
 Toggle Tooltop
</button>
<div class="tooltip" id="permanent_tooltip">
 Hey, a delightful tooltip is here!
</div>

The following source files manage the JavaScript behavior and CSS styles of the Tailwind CSS Tooltip component. Upon building the assets using Webpack Build Tools , these files are compiled and added into the


         dist/assets/css/styles.css

and


         dist/assets/js/core.bundle.js

bundles, making them available globally across all pages.

File	Description
`src/core/components/tooltip/tooltip.ts`	The TypeScript source file that manages the JavaScript behavior of the Tailwind CSS Tooltip component.
`src/core/plugins/components/tooltip.js`	The Tailwind CSS compatible plugin written in PostCSS for applying CSS styles to the Tailwind CSS Tooltip component.

The following markup outlines the core structure of the Tailwind CSS Tooltip component.

				
					<button class="btn btn-primary" data-tooltip="#my_tooltip_content" id="my_tooltip">
 Toggle Tooltop
</button>
<div class="tooltip" id="my_tooltip_content">
 Hey, a delightful tooltip is here!
</div>

Auto-initialize all KTTooltip instances on page load by adding the


         data-tooltip="true"

attribute to your tooltip elements. This triggers on the fly initialization by the KTTooltip JavaScript component.

				
					<button class="btn btn-primary" data-tooltip="#my_tooltip_content" id="my_tooltip">
 Toggle Tooltop
</button>
<div class="tooltip" id="my_tooltip_content">
 Hey, a delightful tooltip is here!
</div>

These attributes allow you to set options for the KTTooltip component during initialization. The values you provide as strings are automatically converted to the appropriate KTTooltip Options .

HTML Attribute	Type	Default	Description
`data-tooltip`	`string`	-	Used to auto-initialize KTTooltip instances on page load and provides a string value serving as an ID selector, `"#content_id"` for a tooltip content element. Alternatively, you can remove it and perform initialization using JavaScript.
`data-tooltip-hidden-class`	`string`	`"hidden"`	Tailwind CSS class to use for the hidden state of the tooltip elements.
`data-tooltip-trigger`	`enum` "hover" \| "click"	`"hover"`	Specifies the tooltip display direction.
`data-tooltip-placement`	`enum` "top" \| "bottom" \| "left" \| "right"	`"top"`	Specifies the trigger method for displaying tooltips.
`data-tooltip-offset`	`string`	`"0, 5px"`	Sets a distance(the x and y axes) between the toggle and tooltip element.
`data-tooltip-delay-show`	`number`	`0`	Sets a custom delay timeouts(in ms) for displaying tooltips.
`data-tooltip-delay-hide`	`number`	`0`	Sets a custom delay timeouts(in ms) for hiding tooltips.
`data-tooltip-permanent`	`boolean`	`false`	Sets tooltips remain persistent and do not close when clicked outside. This feature is exclusive to tooltips triggered by clicking.

To initialize a new tooltip component, pass the corresponding DOM element and configuration options to the KTTooltip class constructor.

JavaScript HTML

				
					// Tooltip toggle element
const tooltipEl = document.querySelector('#my_tooltip');

// Configuration options(optional)
const options = {
	target: '#my_tooltip_content'
};

// Initialize object
const tooltip = new KTTooltip(tooltipEl, options);

				
					<button class="btn btn-primary" data-tooltip="false" id="my_tooltip">
 Toggle Tooltop
</button>
<div class="tooltip" id="my_tooltip_content">
 Hey, a delightful tooltip is here!
</div>

To initialize the tooltip with JavaScript, use the data-tooltip="false" attribute instead. This prevents automatic initialization on page load.

This table outlines the configuration options for initialization of Tailwind CSS Tooltip instances, using the KTTooltip JavaScript component.

Option	Type	Default	Description
`target`	`string`	-	An ID selector of a tooltips content element. Example: `"#my_tooltip_element"` .
`trigger`	`enum` "hover" \| "click"	`"hover"`	Specifies the tooltip display direction.
`placement`	`enum` "top" \| "bottom" \| "left" \| "right"	`"top"`	Specifies the trigger method for displaying tooltips.
`offset`	`string`	`"0, 5px"`	Sets a distance(the x and y axes) between the toggle and tooltip element.
`delayShow`	`number`	`0`	Sets a custom delay timeouts(in ms) for displaying tooltips.
`delayHide`	`number`	`0`	Sets a custom delay timeouts(in ms) for hiding tooltips.
`permanent`	`boolean`	`false`	Sets tooltips remain persistent and do not close when clicked outside. This feature is exclusive to tooltips triggered by clicking.
`hiddenClass`	`string`	`"hidden"`	Tailwind CSS class to use for the hidden state of tooltip elements.

Manage and interact with KTTooltip instances using these static methods of


         KTTooltip

class.

Method	Description
`init()`	Automatically initializes KTTooltip object for all elements with the `data-tooltip="true"` attribute on page load.
`createInstances()`	Allows to create KTTooltip instances for all elements that have been dynamically added to the DOM but haven't been activated yet.
`getInstance(element)`	Returns the `KTTooltip` object associated with the given DOM element `element` .
`getOrCreateInstance(element)`	Returns the existing `KTTooltip` object for the provided DOM element `element` , or creates a new instance if none exists, then returns the same.

JavaScript HTML

				
					// Initialize all tooltips
KTTooltip.init()

// Initialzie pending tooltips
KTTooltip.createInstances();

// Get tooltip object
const tooltipEl = document.querySelector('#my_tooltip');
const tooltip = KTTooltip.getInstance(tooltipEl);

				
					<button class="btn btn-primary" data-tooltip="#my_tooltip_content" id="my_tooltip">
 Toggle Tooltop
</button>
<div class="tooltip" id="my_tooltip_content">
 Hey, a delightful tooltip is here!
</div>

Use KTTooltip component's API methods to programmatically control its behavior.

Method	Description
`new KTTooltip(element, options)`	Creates an object instance of KTTooltip class for the given DOM `element` and configuration `options` .
`show()`	Shows a tooltip element.
`hide()`	Hides a tooltip element.
`toggle()`	Toggles a tooltip state to shown or hidden.
`getOption(name)`	Retrieves the value of a configuration option by `name` parameter from a KTTooltip instance.
`getElement()`	Retrieves the DOM element linked to a specific KTTooltip instance.
`on(eventName, handler)`	Allows attaching event listeners to the KTTooltip custom events using the `eventName` and `eventId` string parameters. These events enable programmatic interaction based on user actions or internal state changes of KTTooltip. The function returns `string` as a unique identifier for the registered listener, allowing you to remove it later if needed.
`off(eventName, eventId)`	Removes an event listener for the `eventName` and `eventId` parameters attached with the `on` method.
`dispose()`	Removes the KTTooltip instance from an element, including any associated data stored on the DOM element.

JavaScript HTML

				
					const tooltipEl = document.querySelector('#my_tooltip');
const tooltip = KTTooltip.getInstance(tooltipEl);

tooltip.show();
tooltip.hide();
tooltip.toggle();

				
					<button class="btn btn-primary" data-tooltip="true" id="my_tooltip">
 Toggle Tooltop
</button>
<div class="tooltip" id="my_tooltip_content">
 Hey, a delightful tooltip is here!
</div>


         KTTooltip

custom events allows you to register callback functions(event listeners) that will be invoked automatically whenever specific custom events are triggered within the component.

Event	Description
`show`	Triggered immediately before a tooltip element is shown.
`shown`	Triggered immediately after a tooltip element is shown.
`hide`	Triggered immediately before a tooltip element is hidden.
`hidden`	Triggered immediately after a tooltip element is hidden.
`toggle`	Triggered immediately before a tooltip element is toggled(shown/hidden).

				
					const tooltipEl = document.querySelector('#my_tooltip');
const tooltip = KTTooltip.getInstance(tooltipEl);

tooltip.on('show', () => {
	console.log('show event');
});

tooltip.on('shown', () => {
	console.log('shown event');
});

tooltip.on('hide', (detail) => {
	detail.cancel = true;
	console.log('hide action canceled');
});

Getting Started

Customization

Base Components

Navigation

Forms

Plugins

Tailwind CSS Tooltip

Default Tooltip

Transition

Advanced Content

Customization

Use as Popover

Placement

Trigger Options

Offset

Delay

Permanent

Source Code

HTML Markup

Data Attribute Initialization

JavaScript Initialization

Options

Utilities

Methods

Events

On This Page