Tooltip

This component offers brief, contextual info when users hover or focus on an element, enhancing clarity without cluttering the interface. Typically used to explain icons, buttons, or any interactive elements where the meaning might not be immediately clear.

Source Storybook

Usage

Import

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
} from "@govtechmy/myds-react/tooltip";

Anatomy

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

Examples

Controlled Component

The open and onOpenChange can be used to manually to handle the state programmatically.

The defaulOpen props can be used to treat the component as an uncontrolled component.

The side props can be used to manually adjust the placement of the TooltipContent. The only accepted values are: left, right, top and bottom.

Props

Tooltip is the wrapper component which manages the tooltip's state. It is being built on top of TooltipPrimitive.Provider and TooltipPrimitive.Root. Please refer to the full API references in this documentation.

Prop	Type	Default
`defaultOpen`	`boolean`	-
`open`	`boolean`	-
`onOpenChange`	`function`	-
`delayDuration`	`number`	`700ms`
`disableHoverableContent`	`boolean`	-

TooltipContent

TooltipContent is the "bubble" that displays the tooltip. It is being built on top of TooltipPrimitive.Portal and TooltipPrimitive.Content. Please refer to the full API references in this documentation.

Prop	Type	Default
`container`	`HTMLElement`	`document.body`
`arrowPadding`	`number`	-
`align`	`enum`	`center`
`side`	`enum`	`top`

TooltipTrigger

TooltipTrigger is the component where the user interacts with to show the tooltip. It is being built on top of TooltipPrimitive.Trigger. Please refer to the full API references in this documentation.

MYDS

Tooltip

Usage

Examples

Controlled Component

Tooltip Content Placement

Props

Tooltip

TooltipContent

TooltipTrigger

On this page