Skip to main content
astrocraft-ui/ components · 101
Shop

Tooltip

Free · MIT

Headless, accessible, and styled entirely through the attribute surface below — bring your own CSS system, or start from the reference theme.

← ToastTour →

Install

Without a flag you get no styling at all — plain HTML carrying the attribute surface below. --theme copies the same theme in two dialects;--bridge lumos re-points either one onto Lumos for Astro's tokens (it needs a theme to re-point, and Lumos itself, already in your project).

Unstyled — behavior only, you write the CSS

Install command
npx astrocraft-ui add overlays/tooltip

Plain-CSS theme — no build step

Install command
npx astrocraft-ui add overlays/tooltip --theme css

Tailwind theme — needs Tailwind v4

Install command
npx astrocraft-ui add overlays/tooltip --theme tailwind

Plain-CSS theme, re-pointed onto Lumos tokens

Install command
npx astrocraft-ui add overlays/tooltip --theme css --bridge lumos

Tailwind theme, re-pointed onto Lumos tokens

Install command
npx astrocraft-ui add overlays/tooltip --theme tailwind --bridge lumos

Live demo

Tooltip

Tooltip on topTooltip on bottomTooltip on leftTooltip on right

Attribute surface

With no class-merging machinery, these attributes are the whole extension point. State is a data-attribute or a native attribute; visibility is the hiddenattribute. Generated from source by pnpm slots.

ComponentSlotsVariantsRuntime stateNative state
`Tooltip.astro``tooltip` `tooltip-root``data-side`: `top` · `bottom` · `left` · `right`——

Source

What the command copies — 2 files, alias-free so the copy lands standing alone. This is the whole component; there is nothing else.

src/components/ui/overlays/tooltip/Tooltip.astro
---
// src/components/ui/overlays/tooltip/Tooltip.astro — headless primitive (see ../../README.md).
// Zero-JS CSS tooltip: wraps a trigger (default slot) and reveals `text` on hover/focus-within.
// The root is the hover scope — a theme writes `[data-slot="tooltip-root"]:hover [data-slot="tooltip"]`
// (and `:focus-within`), which is exactly what the old `group-hover:` utility compiled to.
// For full a11y give the trigger `aria-describedby` matching this tooltip's `id`.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"span"> & {
  text: string;
  side?: "top" | "bottom" | "left" | "right";
};

const { side = "top", text, class: className, ...rest } = Astro.props;
---

<span data-slot="tooltip-root">
  <slot />
  <span role="tooltip" class={className} data-slot="tooltip" data-side={side} {...rest}>
    {text}
  </span>
</span>
src/components/ui/overlays/tooltip/index.ts
import Tooltip from "./Tooltip.astro";

export { Tooltip };
export default Tooltip;

What you get

The component source, copied into your project by npx astrocraft-ui add overlays/tooltip — no package dependency, no CSS to fight. Whatever the paid blocks compose, this is it.