Tailwind CSS Tooltips - Preline UI

A tooltip is a floating, non-actionable label used to explain a user interface element or feature.

When to use

Purpose of content

Tooltips are meant to be exactly that, a hint or tip on what a tool or other interaction does. They are meant to clarify or help you use the content that they hover over, not add additional content:

Since tooltips are only meant to tell the purpose of an element they should be short and to the point "Click X to do X" or "User post count"

Interactions

Tooltips are typically only visible on hover, for that reason if you need to be able to read the content while interacting with other parts of the page then a tooltip will not work.

Conclusion

If you want to give a small few word hint on how or what an element on the page does use a tooltip.

Although it should be noted due to accessibility problems, potential SEO issues, and lack of discovery of the tooltip, it's not recommended unless you absolutely need it.

Basic usage

Example

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.

Copy

                      
                        <div class="hs-tooltip inline-block">
                          <button type="button" class="hs-tooltip-toggle inline-flex items-center gap-x-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:text-white dark:focus:ring-offset-gray-800">
                            <svg class="w-4 h-4 text-gray-600 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                              <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                              <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
                            </svg>
                            Top
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded-md shadow-sm dark:bg-slate-700" role="tooltip">
                              Tooltip on top
                            </span>
                          </button>
                        </div>
                        <div class="hs-tooltip inline-block" data-hs-tooltip-placement="right">
                          <button type="button" class="hs-tooltip-toggle inline-flex items-center gap-x-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:text-white dark:focus:ring-offset-gray-800">
                            <svg class="w-4 h-4 text-gray-600 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                              <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                              <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
                            </svg>
                            Right
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded-md shadow-sm dark:bg-slate-700" role="tooltip">
                              Tooltip on right
                            </span>
                          </button>
                        </div>
                        <div class="hs-tooltip inline-block" data-hs-tooltip-placement="bottom">
                          <button type="button" class="hs-tooltip-toggle inline-flex items-center gap-x-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:text-white dark:focus:ring-offset-gray-800">
                            <svg class="w-4 h-4 text-gray-600 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                              <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                              <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
                            </svg>
                            Bottom
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded-md shadow-sm dark:bg-slate-700" role="tooltip">
                              Tooltip on bottom
                            </span>
                          </button>
                        </div>
                        <div class="hs-tooltip inline-block" data-hs-tooltip-placement="left">
                          <button type="button" class="hs-tooltip-toggle inline-flex items-center gap-x-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:text-white dark:focus:ring-offset-gray-800">
                            <svg class="w-4 h-4 text-gray-600 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                              <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                              <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
                            </svg>
                            Left
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded-md shadow-sm dark:bg-slate-700" role="tooltip">
                              Tooltip on left
                            </span>
                          </button>
                        </div>

JavaScript behavior

Options

Parameters	Description	Options	Default value
`data-hs-tooltip-trigger`	Event to trigger a tooltip	focus \| hover	`hover`
`data-hs-tooltip-placement`	Tooltip placement	top \| top-left \| top-right \| bottom \| bottom-left \| bottom-right \| right \| right-top \| right-bottom \| left \| left-top \| left-bottom	`top`
`data-hs-tooltip-strategy`	Sets the position to `absolute` instead of `fixed`, and removes the `transform` styles to position the menu `relative` to the relative parent block.	fixed \| absolute	`absolute`

Classes

Name	Description
`hs-tooltip`	Tooltip container
`hs-tooltip-toggle`	Tooltip toggle

Methods

The HSTooltip object is contained within the global window object

Method	Description
`HSTooltip.show($tooltipEl)`	Show tooltip
`HSTooltip.hide($tooltipEl)`	Hide tooltip

Events

Method	Description
`show.hs.tooltip`	Called when tooltip is shown.
`hide.hs.tooltip`	Called when tooltip is hidden.

Show any tooltip event example.

                  
                    window.addEventListener('show.hs.tooltip', ($tooltipEl) => {...})

                    // OR

                    HSTooltip.on('show', ($tooltipEl) => {...})

Show specific tooltip event example.

                  
                    $tooltipEl.addEventListener('show.hs.tooltip', (evt) => {...})

On this page