Tooltip — Vanilla

Tooltip with vanilla HTML. CSS shows on :hover of wrapper; add JS for focus and positioning.

Tooltip

Tooltip with trigger. Use tooltip-wrapper and aria-describedby; tooltip has role="tooltip". Add JS for show/hide on focus/hover and positioning.

Add this component

The command below includes <strong>Tooltip</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun
Live example
This is a basic tooltip

HTML

html html 
<div class="tooltip-wrapper" aria-describedby="tip-1">
  <button type="button" class="btn btn-primary">Hover me</button>
  <span class="tooltip tooltip--top" id="tip-1" role="tooltip">This is a basic tooltip</span>
</div>

Other frameworks: Astro · Svelte · Vue · React