Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Implementation

This component is built on top of Radix UI's Tooltip primitive.

Component preview

import * as UI from "@iyk/ui"

export default () => (
  <UI.TooltipProvider>
    <UI.Tooltip>
      <UI.TooltipTrigger>
        <UI.Button type="button" kind="shaded" size="sm">
          Hover me
        </UI.Button>
      </UI.TooltipTrigger>
      <UI.TooltipContent>This is a simple tooltip</UI.TooltipContent>
    </UI.Tooltip>
  </UI.TooltipProvider>
)