Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Features

Built-in state machine to control display delay.
Opens when the trigger is focused or hovered.
Closes when the trigger is activated or when pressing escape.

Installation

Install the component from your command line.

npm install @radix-ui/react-tooltip

npm install @radix-ui/react-tooltip

Anatomy

Import the components and piece the parts together.

import * as Tooltip from '@radix-ui/react-switch';

export default () => (
  <Tooltip.Root>
    <Tooltip.Trigger />
    <Tooltip.Content />
    <Tooltip.Arrow />
  </Tooltip.Root>
);

import * as Tooltip from '@radix-ui/react-switch';
export default () => (
  <Tooltip.Root>
    <Tooltip.Trigger />
    <Tooltip.Content />
    <Tooltip.Arrow />
  </Tooltip.Root>
);

Basic example

Create your styled tooltip component from the primitive parts.

// import { styled } from 'path-to/stitches.config';
import * as Tooltip from '@radix-ui/react-tooltip';
import { BlendingModeIcon } from '@modulz/radix-icons';

const StyledContent = styled(Tooltip.Content, {
  borderRadius: 3,
  padding: '5px 10px',
  fontSize: 14,
  backgroundColor: 'gainsboro',
  color: 'black',
});

const StyledArrow = styled(Tooltip.Arrow, {
  fill: 'gainsboro',
});

export default () => (
  <Tooltip.Root>
    <Tooltip.Trigger>
      <BlendingModeIcon aria-label="Blending mode" />
    </Tooltip.Trigger>
    <StyledContent>
      Blend mode
      <StyledArrow />
    </StyledContent>
  </Tooltip.Root>
);

// import { styled } from 'path-to/stitches.config';
import * as Tooltip from '@radix-ui/react-tooltip';
import { BlendingModeIcon } from '@modulz/radix-icons';
const StyledContent = styled(Tooltip.Content, {
  borderRadius: 3,
  padding: '5px 10px',
  fontSize: 14,
  backgroundColor: 'gainsboro',
  color: 'black',
});
const StyledArrow = styled(Tooltip.Arrow, {
  fill: 'gainsboro',
});
export default () => (
  <Tooltip.Root>
    <Tooltip.Trigger>
      <BlendingModeIcon aria-label="Blending mode" />
    </Tooltip.Trigger>
    <StyledContent>
      Blend mode
      <StyledArrow />
    </StyledContent>
  </Tooltip.Root>
);

API Reference

Root

Contains all the parts of a tooltip.

Prop	Type	Default	Required
`defaultOpen`	`boolean`
`open`	`boolean`
`onOpenChange`	`function`

Trigger

The button that toggles the tooltip. By default, the Tooltip.Content will position itself against the trigger.

Prop	Type	Default	Required
`as`	`enum`	`button`

Content

The component that pops out when the tooltip is open.

Prop	Type	Default
`as`	`enum`	`div`
`aria-label`	`string`
`portalled`	`boolean`	`true`
`anchorRef`	`ref`
`side`	`enum`	`"bottom"`
`sideOffset`	`number`	`0`
`align`	`enum`	`"center"`
`alignOffset`	`number`	`0`
`avoidCollisions`	`boolean`	`true`
`collisionTolerance`	`boolean`	`0`

Arrow

An optional arrow element to render alongside the tooltip. This can be used to help visually link the anchor with the Tooltip.Content. Must be rendered inside Tooltip.Content.

Prop	Type	Default
`as`	`enum`	`svg`
`width`	`number`	`10`
`height`	`number`	`5`
`offset`	`number`

We expose a CSS custom property --radix-tooltip-content-transform-origin. Use it to animate the content from its computed origin based on side, sideOffset, align, alignOffset and any collisions.

const scaleIn = css.keyframes({
  '0%': { opacity: 0, transform: 'scale(0)' },
  '100%': { opacity: 1, transform: 'scale(1)' },
});

const StyledContent = styled(Tooltip.Content, {
  transformOrigin: 'var(--radix-tooltip-content-transform-origin)',
  animation: `${scaleIn} 0.5s ease-out`,
});

const scaleIn = css.keyframes({
  '0%': { opacity: 0, transform: 'scale(0)' },
  '100%': { opacity: 1, transform: 'scale(1)' },
});
const StyledContent = styled(Tooltip.Content, {
  transformOrigin: 'var(--radix-tooltip-content-transform-origin)',
  animation: `${scaleIn} 0.5s ease-out`,
});

Collision-aware animations

We expose data-side and data-align attributes. Their values will change at runtime to reflect collisions. Use them to create collision and direction-aware animations.

const slideDown = css.keyframes({
  '0%': { opacity: 0, transform: 'translateY(-10px)' },
  '100%': { opacity: 1, transform: 'translateY(0)' },
});

const slideUp = css.keyframes({
  '0%': { opacity: 0, transform: 'translateY(10px)' },
  '100%': { opacity: 1, transform: 'translateY(0)' },
});

const StyledContent = styled(Tooltip.Content, {
  '&[data-side="top"]': { animationName: slideUp },
  '&[data-side="bottom"]': { animationName: slideDown },
  animationDuration: '0.6s',
  animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
});

const slideDown = css.keyframes({
  '0%': { opacity: 0, transform: 'translateY(-10px)' },
  '100%': { opacity: 1, transform: 'translateY(0)' },
});
const slideUp = css.keyframes({
  '0%': { opacity: 0, transform: 'translateY(10px)' },
  '100%': { opacity: 1, transform: 'translateY(0)' },
});
const StyledContent = styled(Tooltip.Content, {
  '&[data-side="top"]': { animationName: slideUp },
  '&[data-side="bottom"]': { animationName: slideDown },
  animationDuration: '0.6s',
  animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
});

Accessibility

Keyboard Interactions

Key	Description
`Tab`	Opens/closes the tooltip without delay.
`Space`	If open, closes the tooltip without delay.
`Enter`	If open, closes the tooltip without delay.