#Tooltip

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>