Skip to content
  • System
  • Light
  • Dark
  • High contrast

Tooltip

import { Tooltip } from '@eekodigital/raster';

// In your app root:
// <Tooltip.Provider>

<Tooltip.Root>
  <Tooltip.Trigger>
    {(props) => <Button variant="secondary" {...props}>Hover me</Button>}
  </Tooltip.Trigger>
  <Tooltip.Portal>
    <Tooltip.Content>
      Saves the current draft
    </Tooltip.Content>
  </Tooltip.Portal>
</Tooltip.Root>

Add <Tooltip.Provider> once near the root of your app (e.g. in your layout component) to control global delay and skip-delay settings. Individual tooltips don’t need their own provider.