Get started →

    Tooltip

    The <Tooltip> component displays contextual definitions and explanations when users hover over text. Built on react-aria-components for full accessibility and automatic repositioning.

    Basic

    Code

    import { Tooltip } from '@theme'

ciderpress uses <Tooltip tip="A tool for building documentation websites from source code and markdown files.">SSG</Tooltip> to generate static HTML at build time.

    Output

    ciderpress uses to generate static HTML at build time.

    With headline

    Code

    The <Tooltip headline="API" tip="Application Programming Interface: a set of protocols for software to communicate.">API</Tooltip> supports both REST and GraphQL.

    Output

    The supports both REST and GraphQL.

    Code

    Configure your <Tooltip tip="The central configuration file for your docs site." cta="Read the config guide" href="/concepts/themes">ciderpress.config.ts</Tooltip> to customize the build.

    Output

    Configure your to customize the build.

    Props

    PropTypeRequiredDefaultDescription
    tipstringyes—Main tooltip text displayed on hover
    headlinestringno—Bold headline displayed above the tip
    ctastringno—Call-to-action link label
    hrefstringno—URL for the CTA link (required when cta is set)
    childrenReactNodeyes—Inline content that triggers the tooltip on hover