Tooltip

CSS + PrelineNo design-system JS

Tooltips are styling classes layered on Preline’s tooltip primitive. The design system supplies the look; Preline handles show/hide and positioning.

Tooltips

Open ↗

<div class="flex flex-wrap items-center gap-6">
  <div class="hs-tooltip tooltip [--placement:top]" data-tooltip>
    <button type="button" class="hs-tooltip-toggle button-secondary tooltip-toggle" data-tooltip-toggle>Hover me</button>

    <span class="hs-tooltip-content tooltip-content" role="tooltip" data-tooltip-content> Appears on top </span>
  </div>

  <div class="hs-tooltip tooltip [--placement:right]" data-tooltip>
    <button type="button" class="hs-tooltip-toggle button-tertiary tooltip-toggle" data-tooltip-toggle>And me</button>

    <span class="hs-tooltip-content tooltip-content" role="tooltip" data-tooltip-content> Appears to the right </span>
  </div>
</div>

Markup

Three parts: a container, a toggle, and the content. Pair each design-system class with its Preline hs-tooltip* counterpart.

<div class="tooltip hs-tooltip [--placement:top]" data-tooltip>
  <button type="button" class="tooltip-toggle hs-tooltip-toggle" data-tooltip-toggle>
    Hover me
  </button>

  <span class="tooltip-content hs-tooltip-content" role="tooltip" data-tooltip-content>
    Helpful hint
  </span>
</div>

Classes & attributes

Class	Preline pair	Role
`tooltip`	`hs-tooltip`	Container / positioning context
`tooltip-toggle`	`hs-tooltip-toggle`	The element that triggers the tooltip
`tooltip-content`	`hs-tooltip-content`	The floating bubble

Set placement with the [--placement:…] utility on the container: top, bottom, left, right (and -start / -end variants), e.g. [--placement:right].