1. Plugins
  2. Tooltip & Popover


Tailwind CSS Tooltip & Popover

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

Image Description


To get started, install Tooltip & Popover 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


Name 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
[—prevent-popper:*] Prevents popper positioning calculation issue. "true" | "false" false


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


The HSTooltip object is contained within the global window object

Method Description
Public methods
show() Force show tooltip.
hide() Force hide tooltip.
Static methods
HSTooltip.getInstance(target, isInstance) Returns the element associated to the target.
  • target should be a Node or string (valid selector)
  • isInstance boolean. Returns the instance instead of Node if true
HSTooltip.show(target) Shows the element associated to the target.
  • target should be a Node or string (valid selector)
HSTooltip.hide(target) Hides the element associated to the target.
  • target should be a Node or string (valid selector)

Force show tooltip (public method).

                        const tooltip = new HSTooltip(document.querySelector('#tooltip'));
                        const showBtn = document.querySelector('#show-btn');

                        showBtn.addEventListener('click', () => {

Force show tooltip (static method).

                        const showBtn = document.querySelector('#show-btn');

                        showBtn.addEventListener('click', () => {

Open item (mixed).

                        const { element } = HSTooltip.getInstance('#tooltip', true);
                        const showBtn = document.querySelector('#show-btn');

                        showBtn.addEventListener('click', () => {


Method Description
on:show Called when tooltip is shown.
on:hide Called when tooltip is hidden.

An example where a function is run every time a tooltip shows.

                        const el = HSTooltip.getInstance('#tooltip');

                        el.on('show', (instance) => {...});

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