Tooltip

A small pop-up box that appears when a user hovers over an element.

import { Tooltip } from '@cerberus/react'

Usage

'use client'

import { Information } from '@carbon/icons-react'
import { Tooltip } from '@cerberus/react'

function BasicTooltipPreview() {
  return (
    <Tooltip
      content="Get information from something that has a very long description."
    >
      <Information />
    </Tooltip>
  )
}

Positioning

You can position the tooltip relative to the target element using the position prop.

'use client'

import { InformationFilled } from '@carbon/icons-react'
import { Tooltip } from '@cerberus/react'
import { HStack } from 'styled-system/jsx'

function PositioningTooltipPreview() {
  return (
    <HStack gap="3xl">
      <Tooltip
        content="Top position"
        positioning={{
          placement: 'top',
        }}
      >
        <InformationFilled />
      </Tooltip>
      <Tooltip
        content="Right position"
        positioning={{
          placement: 'right',
        }}
      >
        <InformationFilled />
      </Tooltip>
      <Tooltip
        content="Bottom position"
        positioning={{
          placement: 'bottom',
        }}
      >
        <InformationFilled />
      </Tooltip>
      <Tooltip
        content="Left position"
        positioning={{
          placement: 'left',
        }}
      >
        <InformationFilled />
      </Tooltip>
    </HStack>
  )
}

Primitives

You can utilize the primitive components or the css prop to customize the checkbox.

Component	Description
TooltipRoot	The context provider for the Tooltip parts
TooltipTrigger	The focusable element that triggers the tooltip on hover
TooltipPositioner	The positioning container for the tooltip
TooltipContent	The content of the tooltip
TooltipArrow	The arrow container of the tooltip bubble
TooltipArrowTip	The tip of the arrow

API

Props

The Tooltip component is an abstraction of the primitives and accepts the following props:

Name	Default	Description
content		What to display in the Tooltip.

The Tooltip component also accepts all the props of the TooltipRoot primitive props

Parts

The TooltipParts API is an Object containing the full family of components.

Name	Description
Root	The `TooltipRoot` component.
Trigger	The `TooltipTrigger` component.
Positioner	The `TooltipPositioner` component.
Content	The `TooltipContent` component.
Arrow	The `TooltipArrow` component.
ArrowTip	The `TooltipArrowTip` component.

On this page

Edit this page on Github