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.
Examples
Base
Click the below toggle button to reveal external tooltip.
External Tooltip
Click the below toggle button to reveal external tooltip.
<div> <button class="kt-btn" data-kt-tooltip="#external_tooltip" data-kt-tooltip-placement="bottom-start" > Show Tooltip </button> <div id="external_tooltip" class="kt-tooltip"> Hey, a delightful tooltip is here! </div></div>
Transition
Use Tailwind Transition classes to achieve smooth transitions for your tooltips' appearance.
<button class="kt-btn" data-kt-tooltip="true" data-kt-tooltip-placement="bottom-start"> Show tooltip<span data-kt-tooltip-content="true" class="kt-tooltip transition-opacity duration-300" >Hey, a delightful tooltip is here!</span ></button>
Advanced Content
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.
<button class="kt-btn" data-kt-tooltip="true" data-kt-tooltip-placement="bottom-start"> Show tooltip<span data-kt-tooltip-content="true" class="kt-tooltip kt-tooltip-light" >Hey, this is a finely polished tooltip example.</span ></button>
Popover
Replace the default tooltip class with popover to transform a basic tooltip into a more comprehensive popover, featuring a heading and detailed content.
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 .
<div class="flex flex-wrap gap-4"> <button class="kt-btn" data-kt-tooltip="true" data-kt-tooltip-trigger="hover"> Hover(default)<span data-kt-tooltip-content="true" class="kt-tooltip" >I am triggered by hover.</span ></button ><button class="kt-btn" data-kt-tooltip="true" data-kt-tooltip-trigger="click" > Click<span data-kt-tooltip-content="true" class="kt-tooltip" >I am triggered by click.</span ></button ><button class="kt-btn" data-kt-tooltip="true" data-kt-tooltip-trigger="focus" tabindex="0" > Focus<span data-kt-tooltip-content="true" class="kt-tooltip" >I am triggered by focus.</span > </button></div>
Offset
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.
<button class="kt-btn" data-kt-tooltip="true" data-kt-tooltip-placement="bottom-start" data-kt-tooltip-offset="20px,20px"> Show tooltip<span data-kt-tooltip-content="true" class="kt-tooltip" >Hey, a delightful tooltip is here!</span ></button>
Delay
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.
<button class="kt-btn" data-kt-tooltip="true" data-kt-tooltip-placement="bottom-start" data-kt-tooltip-delay-show="1500" data-kt-tooltip-delay-hide="1500"> Show tooltip<span data-kt-tooltip-content="true" class="kt-tooltip" >Hey, a delightful tooltip is here!</span ></button>
Permanent
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" .
<button class="kt-btn" data-kt-tooltip="true" data-kt-tooltip-placement="bottom-start" data-kt-tooltip-trigger="click" data-kt-tooltip-permanent="true"> Show tooltip<span data-kt-tooltip-content="true" class="kt-tooltip" >Hey, a delightful tooltip is here!</span ></button>
Component API
Options
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
Selectors
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.
Tailwind Modifiers
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.
Methods
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 .
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 tooltipsKTTooltip.init();// Initialzie pending tooltipsKTTooltip.createInstances();// Get tooltip objectconst tooltipEl = document.querySelector('#my-tooltip');const tooltip = KTTooltip.getInstance(tooltipEl);
Events
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.
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.
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 eventIdstring 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.
hiden
Triggered immediately after a tooltip element is hidden.
toggle
Triggered immediately before a tooltip element is toggled(shown/hidden).