Park UI Logo
GitHub
Components
Tooltip

Tooltip

A label that provides information on hover or focus.

Usage

import { Tooltip } from '~/components/ui'

export const Demo = (props: Tooltip.RootProps) => (
  <Tooltip.Root {...props}>
    <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
    <Tooltip.Positioner>
      <Tooltip.Arrow>
        <Tooltip.ArrowTip />
      </Tooltip.Arrow>
      <Tooltip.Content>I am a Tooltip!</Tooltip.Content>
    </Tooltip.Positioner>
  </Tooltip.Root>
)

Installation

npx @park-ui/cli components add tooltip