Tooltip

Toast

Tooltip

Usage

Include CSS

Import Tailwind and one full Basecoat style bundle.

@import "tailwindcss";
@import "basecoat-css/vega.css";

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

@import "tailwindcss";
@import "basecoat-css/base.css";
@import "basecoat-css/components/tooltip.css";
@import "basecoat-css/styles/vega.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.

Basecoat 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

Icon button

Disabled button

Learn more

RTL