Tailwind Tooltip provides users with contextual information or additional details when they hover over or interact with an element on a page. It typically appears as a small pop-up box near the element being hovered over, containing relevant information such as explanations, hints, or descriptions.
Click the below toggle button to reveal external tooltip.
Click the below toggle button to reveal external tooltip.
Use Tailwind Transition classes to achieve smooth transitions for your tooltips' appearance.
The tooltip content can consist of any HTML element, rather than being limited to simple text.
Remove the default class tooltip and utilize Tailwind classes to completely customize the appearance and style of your tooltips.
Replace the default tooltip class with popover to transform a basic tooltip into a more comprehensive popover, featuring a heading and detailed content.
Use data-kt-tooltip-placement attribute with left , right , top,bottom` values control the tooltip display direction.
Enhance tooltip functionality by utilizing the data-kt-tooltip-trigger attribute with either click or focus to tailor tooltip activation to your preference. By default, tooltips are triggered on hover .
Use data-kt-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.
Set custom delay timeouts for displaying and hiding tooltips using the data-kt-tooltip-delay-show="1000" and data-kt-tooltip-delay-hide="1000" attributes, specified in milliseconds. The below examples shows and hides the tooltip with 1000ms(1 second) delay.
Use the data-kt-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-kt-tooltip-trigger="click" .
These data attributes allow you to set options for the tooltip component during auto initialization.
| Name | Type | Default | Description |
| ------------------------------- | --------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------- | --- |
| data-kt-tooltip-hidden-class | string | "hidden" | Tailwind class to use for the hidden state of the tooltip elements. | |
| data-kt-tooltip-trigger | enum | "hover" | Specifies the tooltip display direction. |
| data-kt-tooltip-placement | enum | "top" | Specifies the trigger method for displaying tooltips. |
| data-kt-tooltip-placement-rtl | enum | "top" | Determines the position of the tooltips for RTL languages, in relation to the referecen element. |
| data-kt-tooltip-offset | string | "0, 5px" | Sets a distance(the x and y axes) between the toggle and tooltip element. |
| data-kt-tooltip-offset-rtl | string | "0, 5px" | Sets a distance(the x and y axes) between the toggle and tooltip element RTL languages. |
| data-kt-tooltip-delay-show | number | 0 | Sets a custom delay timeouts(in ms) for displaying tooltips. |
| data-kt-tooltip-delay-hide | number | 0 | Sets a custom delay timeouts(in ms) for hiding tooltips. |
| data-kt-tooltip-permanent | boolean | false | Sets tooltips remain persistent and do not close when clicked outside. This feature is exclusive to tooltips triggered by clicking. |
This table details the custom classes and data attributes used by the tooltip component.
| Name | Description |
|---|---|
| Data Attributes | |
data-kt-tooltip | 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. |
data-kt-tooltip-content="true" | Specifies the tooltip content element if the data-kt-tooltip attribute does not include a content ID selector. |
Custom modifiers to control the accordion’s style and behavior with Tailwind classes.
| Name | Description |
|---|---|
kt-tooltip-active:* | A modifier that applies specific Tailwind classes when the section becomes active. |
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. |
const tooltipEl = document.querySelector('#my-tooltip');
const tooltip = KTTooltip.getInstance(tooltipEl);
tooltip.show();
tooltip.hide();
tooltip.toggle();Manage and interact with KTTooltip instances using these static methods of KTTooltip JavaScript class.
| Method | Description |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- | --- |
| init() | Automatically initializes KTTooltip object for all elements with the data-kt-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. |
// Initialize all tooltips
KTTooltip.init();
// Initialzie pending tooltips
KTTooltip.createInstances();
// Get tooltip object
const tooltipEl = document.querySelector('#my-tooltip');
const tooltip = KTTooltip.getInstance(tooltipEl);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. |
hiden | 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');
});