Tailwind Tooltip

Docs

Tailwind Tooltip

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.

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

<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"
    ><span class="flex items-center gap-1.5"
      >Trial expires in 29 days<!-- -->
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-triangle-alert text-yellow-500 size-4"
        aria-hidden="true"
      >
        <path
          d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
        ></path>
        <path d="M12 9v4"></path>
        <path d="M12 17h.01"></path></svg></span
  ></span>
</button>

Light Style

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>

Replace the default tooltip class with popover to transform a basic tooltip into a more comprehensive popover, featuring a heading and detailed content.

<div>
  <button
    class="kt-btn"
    data-kt-tooltip="#popover_content"
    data-kt-tooltip-trigger="click"
    data-kt-tooltip-placement="bottom-start"
  >
    Toggle Popover
  </button>
  <div id="popover_content" class="kt-popover max-w-56">
    <div class="kt-popover-header">Popover Title</div>
    <div class="kt-popover-content">
      Behold this captivating popover content. It’s quite engaging, wouldn’t you
      say?
    </div>
  </div>
</div>

Placement

Use data-kt-tooltip-placement attribute with left , right , top,bottom` values control the tooltip display direction.

<div class="flex items-center justify-center flex-wrap p-10 gap-4">
  <button
    class="kt-btn"
    data-kt-tooltip="true"
    data-kt-tooltip-placement="left"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-move-left size-4"
      aria-hidden="true"
    >
      <path d="M6 8L2 12L6 16"></path>
      <path d="M2 12H22"></path></svg
    >Left<span data-kt-tooltip-content="true" class="kt-tooltip"
      >Tooltip positioned at the top.</span
    ></button
  ><button
    class="kt-btn"
    data-kt-tooltip="true"
    data-kt-tooltip-placement="top"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-move-up size-4"
      aria-hidden="true"
    >
      <path d="M8 6L12 2L16 6"></path>
      <path d="M12 2V22"></path></svg
    >Top<span data-kt-tooltip-content="true" class="kt-tooltip"
      >Tooltip positioned at the bottom.</span
    ></button
  ><button
    class="kt-btn"
    data-kt-tooltip="true"
    data-kt-tooltip-placement="bottom"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-move-down size-4"
      aria-hidden="true"
    >
      <path d="M8 18L12 22L16 18"></path>
      <path d="M12 2V22"></path></svg
    >Bottom<span data-kt-tooltip-content="true" class="kt-tooltip"
      >Tooltip positioned at the left.</span
    ></button
  ><button
    class="kt-btn"
    data-kt-tooltip="true"
    data-kt-tooltip-placement="right"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-move-right size-4"
      aria-hidden="true"
    >
      <path d="M18 8L22 12L18 16"></path>
      <path d="M2 12H22"></path></svg
    >Right<span data-kt-tooltip-content="true" class="kt-tooltip"
      >Tooltip positioned at the right.</span
    >
  </button>
</div>

Trigger Options

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` .
`show()`	Shows a tooltip element.
`hide()`	Hides a tooltip element.

const tooltipEl = document.querySelector('#my-tooltip');
const tooltip = KTTooltip.getInstance(tooltipEl);
 
tooltip.show();
tooltip.hide();
tooltip.toggle();

Utilities

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

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.

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');

PreviouseToast NextToggle

On This Page

Examples
Component API

Tailwind Tooltip

Examples

Base

External Tooltip

Transition

Advanced Content

Light Style

Popover

Placement

Trigger Options

Offset

Delay

Permanent

Component API

Options

Selectors

Tailwind Modifiers

Methods

Utilities

Events