Tooltip

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

CMSPayload CMS Integration

Tooltips can display CMS-managed help text for form fields and UI elements, with localized content for different languages.

CMS Demo

See how content editors configure tooltips in a CMS:

CMS FieldsEN

Button Label

Tooltip Text

Position

This simulates how a content editor configures tooltips in Payload CMS. Tooltip text can be localized for different languages.

CMS ConfigurationSimulates Payload CMS tooltip configuration

Payload Config Example

// In your Payload CMS field config
export const EmailField = {
  name: "email",
  type: "text",
  admin: {
    components: {
      Description: CustomTooltipDescription,
    },
  },
  custom: {
    tooltip: {
      text: "Enter your primary email address",
      localized: true,
    },
  },
}

Rendering Tooltips

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
} from "@mordecai-design-system/ui"

export function FieldWithTooltip({ label, tooltip, children }) {
  return (
    <div className="flex items-center gap-2">
      <label>{label}</label>
      <Tooltip>
        <TooltipTrigger>
          <InfoIcon className="size-4" />
        </TooltipTrigger>
        <TooltipContent>{tooltip}</TooltipContent>
      </Tooltip>
      {children}
    </div>
  )
}

Basic Usage

Basic tooltip

Positions

With keyboard shortcut

TooltipHover tooltip with content

Installation

pnpm add @corew500/ui

Usage

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
} from "@mordecai-design-system/ui"

<Tooltip>
  <TooltipTrigger>Hover me</TooltipTrigger>
  <TooltipContent>
    Tooltip content
  </TooltipContent>
</Tooltip>

Examples

Positions

<Tooltip>
  <TooltipTrigger>Top (default)</TooltipTrigger>
  <TooltipContent side="top">Content</TooltipContent>
</Tooltip>

<Tooltip>
  <TooltipTrigger>Bottom</TooltipTrigger>
  <TooltipContent side="bottom">Content</TooltipContent>
</Tooltip>

<Tooltip>
  <TooltipTrigger>Left</TooltipTrigger>
  <TooltipContent side="left">Content</TooltipContent>
</Tooltip>

<Tooltip>
  <TooltipTrigger>Right</TooltipTrigger>
  <TooltipContent side="right">Content</TooltipContent>
</Tooltip>

With Keyboard Shortcut

<Tooltip>
  <TooltipTrigger render={<Button />}>
    Save
  </TooltipTrigger>
  <TooltipContent>
    Save file <Kbd>⌘S</Kbd>
  </TooltipContent>
</Tooltip>

Sub-components

| Component | Description | |-----------|-------------| | Tooltip | Root component with provider | | TooltipTrigger | Element that triggers tooltip | | TooltipContent | Tooltip popup content | | TooltipProvider | Shared delay configuration |

Props

TooltipContent

Prop	Type	Default	Description
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`render`	enum	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`align`	enum	`center`	How to align the popup relative to the specified side.
`alignOffset`	enum	`0`	Additional offset along the alignment axis in pixels. Also accepts a function that returns the offset to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side. @example ```jsx <Positioner alignOffset={({ side, align, anchor, positioner }) => { return side === 'top' \|\| side === 'bottom' ? anchor.width : anchor.height; }} /> ```
`side`	enum	`top`	Which side of the anchor element to align the popup against. May automatically change to avoid collisions.
`sideOffset`	enum	`4`	Distance between the anchor and the popup in pixels. Also accepts a function that returns the distance to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side. @example ```jsx <Positioner sideOffset={({ side, align, anchor, positioner }) => { return side === 'top' \|\| side === 'bottom' ? anchor.height : anchor.width; }} /> ```

TooltipProvider

Prop	Type	Default	Description
`delay`	number	`0`	How long to wait before opening a tooltip. Specified in milliseconds.
`closeDelay`	number	—	How long to wait before closing a tooltip. Specified in milliseconds.
`timeout`	number	`400`	Another tooltip will open instantly if the previous tooltip is closed within this timeout. Specified in milliseconds.