1. Plugins
  2. Tooltip


Tailwind CSS Tooltip

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

Image Description


To get started, install Tooltip plugin via npm, else you can skip this step if you are already using Preline UI as a package.

                        npm i @preline/tooltip


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

Basic usage

Prefer to create your own style? Here is a completely unstylized example.

                        <div class="hs-tooltip inline-block">
                          <button type="button" class="hs-tooltip-toggle">
                            Hover me
                            <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-white" role="tooltip">
                              Tooltip on top


Parameters Description Options Default value
[--trigger:*] Event to trigger a tooltip focus | hover hover
[--placement:*] Tooltip placement top | top-left | top-right | bottom | bottom-left | bottom-right | right | right-top | right-bottom | left | left-top | left-bottom top
[--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


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


The HSTooltip object is contained within the global window object

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


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) => {...})

Demo examples

Looking for prebuilt UI components based on the Tailwind CSS? Preline UI packs hundreds of component examples for all your website needs.

Image Description
Check out Preline UI Tooltip