Tooltip

Tooltip displays informative text when hovering or focusing on an element.

Import

import { Tooltip } from "@tosui/react";

Basic Usage

Code

<Tooltip label="This is a tooltip">
  <Button>Hover me</Button>
</Tooltip>

Preview

Placement

Code

<HStack gap={4}>
  <Tooltip label="Top tooltip" placement="top">
    <Button>Top</Button>
  </Tooltip>
  <Tooltip label="Bottom tooltip" placement="bottom">
    <Button>Bottom</Button>
  </Tooltip>
  <Tooltip label="Left tooltip" placement="left">
    <Button>Left</Button>
  </Tooltip>
  <Tooltip label="Right tooltip" placement="right">
    <Button>Right</Button>
  </Tooltip>
</HStack>

Preview

With Delays

Control when the tooltip appears and disappears.

Code

<HStack gap={4}>
  <Tooltip label="Opens after 500ms" openDelay={500}>
    <Button>Open delay</Button>
  </Tooltip>
  <Tooltip label="Closes after 300ms" closeDelay={300}>
    <Button>Close delay</Button>
  </Tooltip>
</HStack>

Preview

Disabled State

Code

<Tooltip label="This won't show" disabled>
  <Button>Disabled tooltip</Button>
</Tooltip>

Preview

Controlled Mode

Use isOpen, onOpen, and onClose for full control.

function ControlledTooltip() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Tooltip
      label="Controlled tooltip"
      isOpen={isOpen}
      onOpen={() => setIsOpen(true)}
      onClose={() => setIsOpen(false)}
    >
      <Button>Controlled</Button>
    </Tooltip>
  );
}

Common Patterns

Icon Button with Tooltip

<Tooltip label="Settings">
  <IconButton aria-label="Settings">
    <SettingsIcon />
  </IconButton>
</Tooltip>

Truncated Text with Tooltip

<Tooltip label="This is the full text that doesn't fit in the container">
  <Text
    maxW="150px"
    overflow="hidden"
    whiteSpace="nowrap"
    textOverflow="ellipsis"
  >
    This is the full text that doesn't fit in the container
  </Text>
</Tooltip>

Disabled Button Explanation

<Tooltip label="You need admin permissions to perform this action">
  <Box as="span">
    <Button disabled>Delete All</Button>
  </Box>
</Tooltip>

Props Reference

Prop	Type	Default	Description
label	ReactNode	-	Tooltip content (required)
placement	"top" | "bottom" | "left" | "right"	"top"	Tooltip position
openDelay	number	0	Delay before showing (ms)
closeDelay	number	0	Delay before hiding (ms)
disabled	boolean	false	Whether tooltip is disabled
isOpen	boolean	-	Controlled open state
onOpen	() => void	-	Callback when tooltip opens
onClose	() => void	-	Callback when tooltip closes
children	ReactNode	-	Trigger element (required)

Accessibility

• Uses role="tooltip"
• Shows on both hover and focus
• Renders via portal to avoid clipping

TypeScript

import { Tooltip, type TooltipPlacement, type TooltipProps } from "@tosui/react";