Tooltip Component — Astro

Tooltip Component

An accessible tooltip component that provides additional context or information when users hover over or focus on an element. Tooltips are positioned relative to their trigger element and support multiple positions.

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

bash bash Copy code

npx rizzo-css add Tooltip

bash bash Copy code

pnpm dlx rizzo-css add Tooltip

bash bash Copy code

npx rizzo-css add Tooltip

bash bash Copy code

bunx rizzo-css add Tooltip

Basic Usage

Wrap any element with a tooltip wrapper and include the Tooltip component. Works with keyboard focus (no extra script).

---
import Tooltip from '../../../components/astro/Tooltip.astro';
import Button from '../components/astro/Button.astro';
---

<div class="tooltip-wrapper" aria-describedby="tooltip-basic">
  <Button>Hover me</Button>
  <Tooltip id="tooltip-basic" text="This is a basic tooltip" position="top" />
</div>

<!-- Rizzo CSS; tooltip is CSS + aria-describedby; no JS required for hover/focus. -->
<div class="tooltip-wrapper" aria-describedby="tooltip-basic">
  <button class="btn btn-primary">Hover me</button>
  <span id="tooltip-basic" class="tooltip tooltip--top" role="tooltip">This is a basic tooltip</span>
</div>

<script>
  import { Tooltip, Button } from '$lib/rizzo';
</script>

<div class="tooltip-wrapper" aria-describedby="tooltip-basic">
  <Button>Hover me</Button>
  <Tooltip id="tooltip-basic" text="This is a basic tooltip" position="top" />
</div>

<script setup>
import Tooltip from '@/components/rizzo/Tooltip.vue';
</script>

<template>
  <button type="button" aria-describedby="tt-1">Hover me</button>
  <Tooltip id="tt-1" text="Tooltip text" position="top" />
</template>

import { Tooltip } from './components/react';

<button type="button" aria-describedby="tt-1">Hover me</button>
<Tooltip id="tt-1" text="Tooltip text" position="top" />

Positions

Tooltips can be positioned in four directions: top, bottom, left, or right.

<!-- Top position -->
<div class="tooltip-wrapper" aria-describedby="tooltip-top">
  <button>Hover me</button>
  <Tooltip id="tooltip-top" text="Tooltip on top" position="top" />
</div>

<!-- Bottom position -->
<div class="tooltip-wrapper" aria-describedby="tooltip-bottom">
  <button>Hover me</button>
  <Tooltip id="tooltip-bottom" text="Tooltip on bottom" position="bottom" />
</div>

<!-- Left position -->
<div class="tooltip-wrapper" aria-describedby="tooltip-left">
  <button>Hover me</button>
  <Tooltip id="tooltip-left" text="Tooltip on left" position="left" />
</div>

<!-- Right position -->
<div class="tooltip-wrapper" aria-describedby="tooltip-right">
  <button>Hover me</button>
  <Tooltip id="tooltip-right" text="Tooltip on right" position="right" />
</div>

With Different Elements

Tooltips work with any element - buttons, links, icons, badges, etc.

Long Text

Tooltips automatically wrap long text and have a maximum width:

Props

• text (string, required) - The tooltip text content
• position ('top' | 'bottom' | 'left' | 'right', optional) - Tooltip position relative to trigger element (default: 'top')
• delay (number, optional) - Delay in milliseconds before showing tooltip (default: 0)
• id (string, optional) - Unique ID for the tooltip. If not provided, a random ID will be generated
• class (string, optional) - Additional CSS classes

Features

• Four position options (top, bottom, left, right)
• Automatic arrow positioning
• Accessible with ARIA attributes
• Keyboard accessible (works with focus states)
• Theme-aware styling using semantic variables
• Smooth animations (respects prefers-reduced-motion)
• Automatic text wrapping for long content
• Maximum width constraint for readability

Accessibility

The Tooltip component includes comprehensive accessibility features:

• ARIA Attributes: Uses role="tooltip" and aria-describedby pattern
• Keyboard Support: Tooltips appear on focus for keyboard users
• Screen Reader Support: Tooltip content is associated with the trigger element
• Focus Management: Tooltips work with :focus-within for proper focus handling

Proper Usage

Always use aria-describedby on the trigger element to associate it with the tooltip:

<div class="tooltip-wrapper" aria-describedby="my-tooltip">
  <button>Hover me</button>
  <Tooltip id="my-tooltip" text="Tooltip text" />
</div>

Styling

Tooltips use semantic theme variables and automatically adapt to the selected theme:

• Background: var(--text) (uses text color for high contrast)
• Text: var(--background) (uses background color for contrast)
• Shadow: var(--shadow-lg) for depth

Other frameworks: Vanilla · Svelte · Vue · React