GitHub

Components

Tooltip

Add contextual help with hover tooltips

Tooltips provide additional context when users hover over terms or elements.

Basic Usage

Hover over the API to see more information.

Hover over the <Tooltip client:load tip="Application Programming Interface">API</Tooltip> to see more information.

Multiple Tooltips

Learn about SSG, SSR, and ISR rendering strategies.

Learn about <Tooltip client:load tip="Static Site Generation">SSG</Tooltip>, 
<Tooltip client:load tip="Server-Side Rendering">SSR</Tooltip>, and 
<Tooltip client:load tip="Incremental Static Regeneration">ISR</Tooltip>.

Props

tipstringrequired

Tooltip content text shown on hover

childrenReactNoderequired

The text or element to hover over

client:loaddirectiverequired

Required Astro directive for client-side interactivity