Tailwind CSS Tooltip - Flowbite

Use the following Tailwind CSS powered tooltips to show extra content when hovering or focusing on an element

Flowbite allows you to use the Tailwind CSS tooltip component to show extra information when hovering or focusing over an element in multiple positions, styles, and animations.

Before continuing, make sure that you have the Flowbite JavaScript file included in your project in order to make the tooltip component work.

Default tooltip example #

To get started with using tooltips all you need to do is add the data-tooltip-target="{elementId}" data attribute to an element where elementId is the id of the tooltip component. In the following example you can see the button that will trigger the tooltip-default element to be shown when hovered or focused.

Edit on GitHub

<button data-tooltip-target="tooltip-default" type="button" class="text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Default tooltip</button>

<div id="tooltip-default" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-dark rounded-base shadow-xs opacity-0 tooltip">
    Tooltip content
    <div class="tooltip-arrow" data-popper-arrow></div>
</div>

Tooltip styles #

You can use choose between dark and light version styles for the tooltip component by changing the utility classes from Tailwind CSS and by applying the data-tooltip-style="{light|dark}" data attribute.

Edit on GitHub

<!-- Light style tooltip -->

<button data-tooltip-target="tooltip-light" data-tooltip-style="light" type="button" class="text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Light tooltip</button>

<div id="tooltip-light" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-heading bg-neutral-primary-medium border border-default rounded-base shadow-xs opacity-0 tooltip">
    Tooltip content
    <div class="tooltip-arrow" data-popper-arrow></div>
</div>

<!-- Dark style tooltip -->

<button data-tooltip-target="tooltip-dark" type="button" class="ms-3 text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Dark tooltip</button>

<div id="tooltip-dark" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-dark rounded-base shadow-xs opacity-0 tooltip">
    Tooltip content
    <div class="tooltip-arrow" data-popper-arrow></div>
</div>

Placement #

The positioning of the tooltip element relative to the triggering element (eg. button, link) can be set using the data-tooltip-placement="{top|right|bottom|left}" data attribute.

Edit on GitHub

<!-- Show tooltip on top -->

<button data-tooltip-target="tooltip-top" data-tooltip-placement="top" type="button" class="mb-2 md:mb-0 text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Tooltip top</button>

<div id="tooltip-top" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-dark rounded-base shadow-xs opacity-0 tooltip">
    Tooltip on top
    <div class="tooltip-arrow" data-popper-arrow></div>
</div>

<!-- Show tooltip on right -->

<button data-tooltip-target="tooltip-right" data-tooltip-placement="right" type="button" class="ms-3 mb-2 md:mb-0 text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Tooltip right</button>

<div id="tooltip-right" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-dark rounded-base shadow-xs opacity-0 tooltip">
    Tooltip on right
    <div class="tooltip-arrow" data-popper-arrow></div>
</div>

<!-- Show tooltip on bottom -->

<button data-tooltip-target="tooltip-bottom" data-tooltip-placement="bottom" type="button" class="ms-3 mb-2 md:mb-0 text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Tooltip bottom</button>

<div id="tooltip-bottom" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-dark rounded-base shadow-xs opacity-0 tooltip">
    Tooltip on bottom
    <div class="tooltip-arrow" data-popper-arrow></div>
</div>

<!-- Show tooltip on left -->

<button data-tooltip-target="tooltip-left" data-tooltip-placement="left" type="button" class="ms-3 mb-2 md:mb-0 text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Tooltip left</button>

<div id="tooltip-left" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-dark rounded-base shadow-xs opacity-0 tooltip">
    Tooltip on left
    <div class="tooltip-arrow" data-popper-arrow></div>
</div>

Triggering #

You can choose the triggering event by using the data-tooltip-trigger="{hover|click}" data attributes to choose whether you want to show the tooltip when hovering or clicking on the element. By default this option is set to hover.

Edit on GitHub

<!-- Show tooltip on hover -->

<button data-tooltip-target="tooltip-hover" data-tooltip-trigger="hover" type="button" class="text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Tooltip hover</button>

<div id="tooltip-hover" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-dark rounded-base shadow-xs opacity-0 tooltip">
    Tooltip content
    <div class="tooltip-arrow" data-popper-arrow></div>
</div>

<!-- Show tooltip on click -->

<button data-tooltip-target="tooltip-click" data-tooltip-trigger="click" type="button" class="ms-3 text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Tooltip click</button>

<div id="tooltip-click" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-dark rounded-base shadow-xs opacity-0 tooltip">
    Tooltip content
    <div class="tooltip-arrow" data-popper-arrow></div>
</div>

Animation #

You can set tooltip animation styles by using the transition utility classes from Tailwind CSS. Make sure that you add transition-opacity and duration-{x} to set the animation duration.

Edit on GitHub

<button data-tooltip-target="tooltip-animation" type="button" class="text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Animated tooltip</button>

<div id="tooltip-animation" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-dark rounded-base shadow-xs opacity-0 tooltip">
    Tooltip content
    <div class="tooltip-arrow" data-popper-arrow></div>
</div>

Disable arrow #

You can also disable the tooltip arrow by not including the data-popper-arrow element.

Edit on GitHub

<button data-tooltip-target="tooltip-no-arrow" type="button" class="text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Default tooltip</button>

<div id="tooltip-no-arrow" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-dark rounded-base shadow-xs opacity-0 tooltip">
    Tooltip content
</div>

JavaScript behaviour #

The Tooltip class from Flowbite can be used to create an object that will show a tooltip element relative to the main trigger element, such as a button, based on the parameters, options, and methods that you provide.

Object parameters #

Initialize a Tooltip object with the object parameters including the trigger element, the tooltip content element, and extra options to set the positioning and offsets of the tooltip.

Parameter	Type	Required	Description
`targetEl`	Element	Required	Apply the tooltip content element to show and hide it either using the methods or the hover or click status of the trigger element.
`triggerEl`	Element	Required	Set an element to trigger the tooltip when clicking or hovering (ie. a button, text).
`options`	Object	Optional	Use the options parameter to set the positioning of the tooltip element, trigger type, offsets, and more.
`instanceOptions`	Object	Optional	Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.

Options #

Use the following options as the third parameter for the Tooltip class to set the positioning, offset, and the trigger type (hover or click) for the tooltip element.

Option	Type	Description
`placement`	String	Set the position of the tooltip element relative to the trigger element choosing from `top\|right\|bottom\|left`.
`triggerType`	String	Set the event type that will trigger the tooltip content choosing between `hover\|click\|none`.
`onHide`	Function	Set a callback function when the tooltip is hidden.
`onShow`	Function	Set a callback function when the tooltip is shown.
`onToggle`	Function	Set a callback function when the tooltip visibility is toggled.

Methods #

Use the methods from the Tooltip object to programmatically show or hide the tooltip from JavaScript.

Method	Description
`show()`	Use this method on the Tooltip object to show the tooltip content.
`hide()`	Use this method on the Tooltip object to hide the tooltip content.
`toggle()`	Use this method on the Tooltip object to toggle the visibility of the tooltip content.
`updateOnShow(callback)`	Use this method to set a custom callback function when the tooltip has been shown.
`updateOnHide(callback)`	Use this method to set a custom callback function when the tooltip has been hidden.
`updateOnToggle(callback)`	Use this method to set a custom callback function when the tooltip visibility has been toggled.

Example #

Check out the following JavaScript example to learn how to initialize, set the options, and use the methods for the Tooltip object.

First of all, set the target element as the tooltip itself and the trigger element which can be a button or text element.

After that you can also set the options object to change the placement and trigger type of the tooltip, alongside with the callback functions.

tooltip.js

// set the tooltip content element
const $targetEl = document.getElementById('tooltipContent');

// set the element that trigger the tooltip using hover or click
const $triggerEl = document.getElementById('tooltipButton');

// options with default values
const options = {
    placement: 'bottom',
    triggerType: 'hover',
    onHide: () => {
        console.log('tooltip is shown');
    },
    onShow: () => {
        console.log('tooltip is hidden');
    },
    onToggle: () => {
        console.log('tooltip is toggled');
    },
};


// instance options with default values
const instanceOptions = {
  id: 'tooltipContent',
  override: true
};

Create a new Tooltip object based on the options above.

tooltip.js

import { Tooltip } from 'flowbite';

/*
 * $targetEl: required
 * $triggerEl: required
 * options: optional
 */
const tooltip = new Tooltip($targetEl, $triggerEl, options, instanceOptions);

Use the show and hide methods on the Tooltip object to programmatically show and hide the tooltip element using JavaScript.

Terminal

// show the tooltip
tooltip.show();

// hide the tooltip
tooltip.hide();

// toggle the tooltip
tooltip.toggle();

// destroy tooltip object (removes event listeners and off-canvas Popper.js)
tooltip.destroy();

// re-initialize tooltip object
tooltip.init();

HTML Markup #

Use the following HTML code for the JavaScript example above.

tooltip.html

<button
    id="tooltipButton"
    type="button"
    class="rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
    Default tooltip
</button>
<div
    id="tooltipContent"
    role="tooltip"
    class="tooltip invisible absolute z-10 inline-block rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium text-white opacity-0 shadow-xs transition-opacity duration-300 dark:bg-gray-700"
>
    Tooltip content
    <div class="tooltip-arrow" data-popper-arrow></div>
</div>

TypeScript #

If you’re using the TypeScript configuration from Flowbite then you can import the types for the Tooltip class, parameters and its options.

Here’s an example that applies the types from Flowbite to the code above:

tooltip.ts

import { Tooltip } from 'flowbite';
import type { TooltipOptions, TooltipInterface } from 'flowbite';
import type { InstanceOptions } from 'flowbite';

// set the tooltip content element
const $targetEl: HTMLElement = document.getElementById('tooltipContent');

// set the element that trigger the tooltip using hover or click
const $triggerEl: HTMLElement = document.getElementById('tooltipButton');

// options with default values
const options: TooltipOptions = {
    placement: 'top',
    triggerType: 'hover',
    onHide: () => {
        console.log('tooltip is shown');
    },
    onShow: () => {
        console.log('tooltip is hidden');
    },
    onToggle: () => {
        console.log('tooltip is toggled');
    },
};

// instance options with default values
const instanceOptions: InstanceOptions = {
  id: 'tooltipContent',
  override: true
};

/*
 * targetEl: required
 * triggerEl: required
 * options: optional
 */
const tooltip: TooltipInterface = new Tooltip($targetEl, $triggerEl, options, instanceOptions);

// show the tooltip
tooltip.show();

Get more updates...

Do you want to get notified when a new component is added to Flowbite? Sign up for our newsletter and you'll be among the first to find out about new features, components, versions, and tools.

By subscribing, you agree with ConvertKit's Terms of Service and Privacy Policy.

Tailwind CSS Tooltip - Flowbite

Default tooltip example #

Tooltip styles #

Placement #

Triggering #

Animation #

Disable arrow #

JavaScript behaviour #

Object parameters #

Options #

Methods #

Example #

HTML Markup #

TypeScript #

On this page