1. Plugins
  2. Popover


Tailwind CSS Popover

A simple and compact dialog of an action.

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


Four options are available: top, right, bottom, and left aligned.

Basic usage

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

                        <div class="hs-tooltip inline-block [--trigger:click]">
                          <a class="hs-tooltip-toggle block" href="javascript:;">
                            Click me
                            <div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-3 px-4 bg-white" role="tooltip">
                              Top popover


Parameters Description Options Default value
[--trigger:*] Event to trigger a tooltip focus | hover | click 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 Popover