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.
portal	`false`	When true, renders the `content` within a `Portal`.

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.

Note

It is best to only use the TooltipParts if you are building a custom solution. Importing Object based components will ship every property it includes into your bundle, regardless if you use it or not.

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