Skip to content
Vy logo
Components

Tooltip

Tooltips are used to show additional information when hovering an element. OBS! If possible, we recommend using Popover instead of Tooltips, as these are more accessible than tooltips.

Examples

A simple tooltip

<Tooltip>
  <TooltipTrigger>
    <Text width="fit-content"> Hover me! </Text>
  </TooltipTrigger>
  <TooltipContent>
    This is the content of the tooltip
  </TooltipContent>
</Tooltip>

Placement of the TooltipContent. Defaults to "bottom"

() => {
  const positions = ["right-end", "left-start", "top"]
  return(
  <Flex gap="3">
  {positions.map((p) => 
    <Tooltip positioning={{ placement: p}}>
      <TooltipTrigger>
        <Button variant="ghost"> {p} </Button>
      </TooltipTrigger>
      <TooltipContent>
        This is the content of the tooltip
      </TooltipContent>
    </Tooltip>
  )}
  </Flex>
)
}

With arrow

<Tooltip>
  <TooltipTrigger>
    <Text width="fit-content"> Hover me! </Text>
  </TooltipTrigger>
  <TooltipContent showArrow>
    This content has an arrow attached to it
  </TooltipContent>
</Tooltip>

Using different components as the Tooltip trigger

<Flex gap="2" direction="column">
  <Tooltip>
    <TooltipTrigger>
       <Checkbox> Hover me!</Checkbox>
    </TooltipTrigger>
    <TooltipContent>
      This is the content of the tooltip
    </TooltipContent>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger>
      <Switch label="Switch with label"/>
    </TooltipTrigger>
    <TooltipContent>
      This is the content of the tooltip
    </TooltipContent>
  </Tooltip>
</Flex>