Components

Tooltip

Add contextual help with hover tooltips

Tooltips provide additional context only when the user hovers or focuses the trigger (the wrapped element). The tip content is hidden until that action—never shown as static body text.

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; shown only on hover/focus (user action).

childrenReactNoderequired

The trigger element (e.g. a term); user hovers/focuses this to see the tip.

client:loaddirectiverequired

Required Astro directive for client-side interactivity