Tooltip Overview

---

Description

Used to display a helpful message when hovering over an element. A tooltip’s arrow can be placed in 4 different positions, each centered on the side and could even be used on a basic <div> element.

Tooltip Anatomy

1. Tooltip
2. Content
3. Text
4. Arrow

Import

import { TooltipContent, Tooltip, TooltipTrigger } from '@pluralsight/react'

Variations

Props

Note: those denoted with ? are optional

Tooltip

{
  placement?: Placement,
  open?: boolean,
  onOpenChange?: (open: boolean) => void
}

TooltipTrigger

{
  children: ReactNode,
  ...nativeHTMLDivAttributes
}

TooltipContent

{
  text: string,
  ...nativeHTMLDivAttributes
}