Tooltip

Supplementary explanations for a term in article prose.

MDX@gaudi/design-system/mdx/TooltipView in Storybook Source

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import Tooltip from '@gaudi/design-system/mdx/Tooltip';

Usage

A <Tooltip message='Compact supporting context.'>technical term</Tooltip> can carry a short explanation.

Examples

Playground

API

2 props

Accessibility

Keep essential information in the article. The trigger must remain discoverable and keyboard accessible.

TooltipBrief contextual help attached to an independently labelled control.4 examples AsideSupporting article content outside the main reading flow.CalloutHighlight an article note, tip, warning or error while preserving readable prose.ChartChart is the MDX adapter for the Charts collection: authors write <Chart type=…> (or a chart by name) in an article and get the same framed, accessible chart an application renders from @gaudi/design-system/charts.CitationCitation documents the blog citation authoring flow and the Gaudi runtime components that hydrate generated citation links.CitationTrackerKeep bibliography back-links associated with the last visited citation.