1. Overlays
  2. Tooltips


Tailwind CSS Tooltips - Preline UI

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

Requires JS

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:

Image Description

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"


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.


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


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

JavaScript behavior


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


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