Tooltip

Tooltips display brief labels or messages

1
import { Tooltip } from '@cerberus/react'

Usage

The icon color has been customized to see on this background

position

text

To customize the tooltip, we recommend extending the Tooltip slot recipe found in the preset.

1
export interface TooltipProps {
2
  content: ReactNode
3
  position?: 'top' | 'right' | 'bottom' | 'left'
4
}

Name	Default	Description
content		The content to display in the tooltip
position	'top'	The position of the tooltip relative to the target element

1
import { Tooltip } from '@cerberus/react'

The icon color has been customized to see on this background

position

text

To customize the tooltip, we recommend extending the Tooltip slot recipe found in the preset.

1
export interface TooltipProps {
2
  content: ReactNode
3
  position?: 'top' | 'right' | 'bottom' | 'left'
4
}

Name	Default	Description
content		The content to display in the tooltip
position	'top'	The position of the tooltip relative to the target element

1
import { Tooltip } from '@cerberus/react'

The icon color has been customized to see on this background

position

text

To customize the tooltip, we recommend extending the Tooltip slot recipe found in the preset.

1
export interface TooltipProps {
2
  content: ReactNode
3
  position?: 'top' | 'right' | 'bottom' | 'left'
4
}

Name	Default	Description
content		The content to display in the tooltip
position	'top'	The position of the tooltip relative to the target element

1
import { Tooltip } from '@cerberus/react'

The icon color has been customized to see on this background

position

text

To customize the tooltip, we recommend extending the Tooltip slot recipe found in the preset.

1
export interface TooltipProps {
2
  content: ReactNode
3
  position?: 'top' | 'right' | 'bottom' | 'left'
4
}

Name	Default	Description
content		The content to display in the tooltip
position	'top'	The position of the tooltip relative to the target element