Tooltip

Tooltip adds a short explanation on hover or focus and must not contain information or actions required to complete a task.

InstallTerminal

npm install @a3s-lab/ui

<button class="btn" data-variant="outline" data-tooltip="Tooltip text" data-side="bottom" data-align="center">Bottom</button>

import "@a3s-lab/ui/a3s.css";

Usage

Include CSS

Import Tailwind and one full A3S UI style bundle.

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

Or import only the base CSS, Tooltip component CSS, and one style pack.

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/tooltip.css";
@import "@a3s-lab/ui/styles/a3s.css";

Using CDN or bundler imports? See the Installation page.

Add your tooltip HTML

Add data-tooltip to the trigger element. Use data-side and data-align to change the position:

data-tooltip: Tooltip text.
data-side Optional: top, bottom, left, right, inline-start, or inline-end. Defaults to top.
data-align Optional: start, center, or end. Defaults to center.

A3S UI tooltips are CSS-only and text-only. This intentionally differs from shadcn/ui's composed tooltip content, which can render arbitrary markup and uses a portal.

<button class="btn" data-variant="outline" data-tooltip="Tooltip text" data-side="bottom" data-align="center">Bottom</button>

Examples

Default

Sides

<div class="flex flex-wrap gap-2">
  <button class="btn" data-variant="outline" data-tooltip="Tooltip" data-side="inline-start">Inline Start</button>
  <button class="btn" data-variant="outline" data-tooltip="Tooltip" data-side="top">Top</button>
  <button class="btn" data-variant="outline" data-tooltip="Tooltip" data-side="bottom">Bottom</button>
  <button class="btn" data-variant="outline" data-tooltip="Tooltip" data-side="inline-end">Inline End</button>
</div>

Icon button

<button class="btn" data-variant="ghost" data-size="icon" data-tooltip="Additional information" aria-label="Info"><svg class="lucide lucide-info" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" /></svg></button>

Disabled button

Link

Learn more

RTL

<div dir="rtl" class="flex gap-2">
  <button class="btn" data-variant="outline" data-tooltip="تلميح" data-side="inline-start">Inline Start</button>
  <button class="btn" data-variant="outline" data-tooltip="تلميح" data-side="inline-end">Inline End</button>
</div>

#Tooltip

#Usage

Include CSS

Add your tooltip HTML

#Examples

#Default

#Sides

#Icon button

#Disabled button

#Link

#RTL