Tooltip
Accessible tooltip component with positioning options and hover states
Same BEM classes and behavior as Astro, Svelte, and Vue.
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.
npx rizzo-css add Tooltip
pnpm dlx rizzo-css add Tooltip
npx rizzo-css add Tooltip
bunx rizzo-css add Tooltip
Live examples
Usage
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
Astro Vanilla Svelte Vue React ---
import Tooltip from '../components/astro/Tooltip.astro';
---
<button type="button" aria-describedby="tt-1">Hover me</button>
<Tooltip id="tt-1" text="Tooltip text" position="top" />
<!-- Rizzo CSS; tooltip is CSS + aria-describedby; no JS required for hover/focus. -->
<div class="tooltip-wrapper" aria-describedby="tip-1">
<button type="button" class="btn btn-primary">Hover me</button>
<span id="tip-1" class="tooltip tooltip--top" role="tooltip">Tooltip text</span>
</div>
<script>
import { Tooltip } from '$lib/rizzo';
</script>
<button type="button" aria-describedby="tt-1">Hover me</button>
<Tooltip id="tt-1" text="Tooltip text" position="top" />
<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" />
Other frameworks: Astro · Vanilla · Svelte · Vue
npm 
pnpm 
yarn 
bun