Tooltip

ComponentsBeta

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

import React from 'react';
import { Tooltip, IconButton } from '@minddrop/ui';

export const TooltipDemo = () => (
  <div style={{ display: 'flex', alignItems: 'center' }}>
    <Tooltip title="New drop" keyboardShortcut={['Ctrl', 'N']}>
      <IconButton icon="settings" color="contrast" />
    </Tooltip>
  </div>
);

export default TooltipDemo;

Features

Opens when the trigger is focused or hovered.
Closes when the trigger is activated or when pressing escape.
Supports custom timings.
Renders a title, description, and keyboard shortcut.

Usage

Import the component from the @minddrop/ui package.

import { Tooltip, IconButton } from '@minddrop/ui';

export default () => {
  return (
    <Tooltip title="New drop" keyboardShortcut={['Mod', 'N']}>
      <IconButton icon="add" label="New drop" />
    </Tooltip>
  );
};

Show instantly

Use the delayDuration prop to control the time it takes for the tooltip to open.

import { Tooltip } from '@minddrop/ui';

export default () => (
  <Tooltip delayDuration={0}>
    <button>...</button>
  </Tooltip>
);

Since disabled buttons don't fire events, you need to:

Render the Trigger as span.
Ensure the button has no pointerEvents.

import { Tooltip } from '@minddrop/ui';

export default () => (
  <Tooltip title="Not available offline">
    <span>
      <button disabled style={{ pointerEvents: 'none' }}>Publish<button>
    </span>
  </Tooltip>
);

Radix exposes 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.

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.tooltip {
  transform-origin: var(--radix-tooltip-content-transform-origin);
  animation: scaleIn 0.5s ease-out;
}

Collision-aware animations

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

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(0);
  }

  to {
    opacity: 1;
    transform: translateY(-10px);
  }
}

.tooltip {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.tooltip[data-side='bottom'] {
  animation: slideDown;
}

.tooltip[data-side='top'] {
  animation: slideUp;
}

API Reference

Prop	Type	Default
`children*`	`node`	No default value
`title*`	`node`	No default value
`description`	`node`	No default value
`keyboardShortcut`	`string[]`	`[]`
`defaultOpen`	`boolean`	No default value
`open`	`boolean`	No default value
`onOpenChange`	`function`	No default value
`delayDuration`	`number`	`700`
`skipDelayDuration`	`number`	`300`
`aria-label`	`string`	No default value
`portalled`	`boolean`	`true`
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`
`sideOffset`	`number`	`0`
`align`	`'start' \| 'center' \| 'end'`	`'center'`
`alignOffset`	`number`	`0`
`avoidCollisions`	`boolean`	`true`
`collisionTolerance`	`number`	`0`

Accessibility

Adheres to the Tooltip Widget WAI-ARIA design pattern.

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.
`Escape`	If open, closes the tooltip without delay.

Toolbar

TopicNavItem

Edit this page on GitHub.

Overview

Components

Utilities