Tailwind CSS Tooltip

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

Tailwind 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 Tailwind 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
        
              Toggle full screen
              
              Toggle tablet view
              
            Toggle mobile view
            
Toggle dark mode

            Loading...
        
                  HTML
                
                      Copy to clipboard
                      
    Tooltip content
    
<button data-tooltip-target="tooltip-default" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Default tooltip</button>

<div id="tooltip-default" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700">
    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
        
              Toggle full screen
              
              Toggle tablet view
              
            Toggle mobile view
            
Toggle dark mode

            Loading...
        
                  HTML
                
                      Copy to clipboard
                      
    Tooltip content
    
    Tooltip content
    
<!-- Light style tooltip -->

<button data-tooltip-target="tooltip-light" data-tooltip-style="light" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Light tooltip</button>

<div id="tooltip-light" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm 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="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Dark tooltip</button>

<div id="tooltip-dark" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
    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
        
              Toggle full screen
              
              Toggle tablet view
              
            Toggle mobile view
            
Toggle dark mode

            Loading...
        
                  HTML
                
                      Copy to clipboard
                      
    Tooltip on top
    
    Tooltip on right
    
    Tooltip on bottom
    
    Tooltip on left
    
<!-- 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-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Tooltip top</button>

<div id="tooltip-top" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
    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="mb-2 md:mb-0 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Tooltip right</button>

<div id="tooltip-right" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
    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="mb-2 md:mb-0 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Tooltip bottom</button>

<div id="tooltip-bottom" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
    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="mb-2 md:mb-0 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Tooltip left</button>

<div id="tooltip-left" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
    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
        
              Toggle full screen
              
              Toggle tablet view
              
            Toggle mobile view
            
Toggle dark mode

            Loading...
        
                  HTML
                
                      Copy to clipboard
                      
    Tooltip content
    
    Tooltip content
    
<!-- Show tooltip on hover -->

<button data-tooltip-target="tooltip-hover" data-tooltip-trigger="hover" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Tooltip hover</button>

<div id="tooltip-hover" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
    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="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Tooltip click</button>

<div id="tooltip-click" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
    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
        
              Toggle full screen
              
              Toggle tablet view
              
            Toggle mobile view
            
Toggle dark mode

            Loading...
        
                  HTML
                
                      Copy to clipboard
                      
    Tooltip content
    
<button data-tooltip-target="tooltip-animation" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Animated tooltip</button>

<div id="tooltip-animation" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700">
    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
        
              Toggle full screen
              
              Toggle tablet view
              
            Toggle mobile view
            
Toggle dark mode

            Loading...
        
                  HTML
                
                      Copy to clipboard
                      
    Tooltip content
<button data-tooltip-target="tooltip-no-arrow" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Default tooltip</button>

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

JavaScript behaviour #

The Tooltip class from Tailwind 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.

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`.
`onHide`	Function	Set a callback function when the tooltip is hidden.
`onShow`	Function	Set a callback function when the tooltip is shown.

Methods #

Use the methods from the Tooltip object to programatically 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.

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.

// 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')
  }
}

Create a new Tooltip object based on the options above.

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

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

// show the tooltip
tooltip.show()

// hide the tooltip
tooltip.hide()

HTML Markup #

Use the following HTML code for the JavaScript example above.

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