Tooltip

The Tooltip component provides additional information about an element when the user hovers over it. It's a flexible way to offer context for UI elements without cluttering the interface.

Report Issue Github

Usage

Basic Tooltip

Simple Tooltip example:


<Flex align="center" justify="center"  height="100%">
  <Tooltip label="I'm a tooltip!">
    <Button highContrast>Hover over me</button>
  </Tooltip>
</Flex>

Tooltip Placement

Tooltip with a bottom placement:


<Flex align="center" justify="center" height="100%">
  <Tooltip label="I'm below!" placement="bottom">
    <Button highContrast>Hover over me</Button>
  </Tooltip>
</Flex>

API

Props

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-
`label`	`string`	`-`	Yes
`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	`-`	-

Toast

Aspect Ratio