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

This component is made on top of Radix UIs Tooltip Component with our styling conventions. This component has been shared with you, ensuring that all its native properties are accessible.

Anatomy

Import all parts and piece them together.

import { Tooltip, TooltipTrigger, TooltipContent } from "@rafty/ui";

<Tooltip>
  <TooltipTrigger />
  <TooltipContent />
</Tooltip>;

Usage

<Tooltip>
  <TooltipTrigger asChild>
    <Button size="fab">
      <PlusIcon
        className="stroke-2"
        height={24}
        width={24}
      />
    </Button>
  </TooltipTrigger>
  <TooltipContent side="top">
    Hover Me!
  </TooltipContent>
</Tooltip>