Tooltip

Features

• Customizable Appearance: Easily adjust the appearance of the tooltip, including its position, offset, and alignment.
• Accessibility Support: Built-in ARIA attributes ensure the tooltip is accessible to screen readers and meets accessibility standards.
• Smooth Animations: Supports origin-aware animations for a polished user experience.
• Global Configuration: Use TooltipProvider to manage tooltip behavior across your entire application.

Installation

npx duck-ui@latest add tooltip

Usage

Import the necessary components from your UI library:

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui"

Here's a basic example of using the Tooltip component:

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Hover</TooltipTrigger>
    <TooltipContent>
      <p>Add to library</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Examples

Configure Globally

This example demonstrates how to configure tooltips globally using the TooltipProvider:

Origin-Aware Animations

Enhance your tooltips with smooth animations that consider the origin of the tooltip, you can write this animation in any place in your app ( tailwindcss, css, scss, ..stc ).:

import { Tooltip, TooltipTrigger, TooltipContent } from '@radix-ui/react-tooltip';
import './styles.css';
 
export default function App() {
  return (
    <Tooltip>
      <TooltipTrigger>Hover me</TooltipTrigger>
      <TooltipContent className="TooltipContent">Tooltip with animation</TooltipContent>
    </Tooltip>
  );
}

/* styles.css */
.TooltipContent {
  transform-origin: var(--radix-tooltip-content-transform-origin);
  animation: scaleIn 0.5s ease-out;
}
 
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

API Reference

TooltipProvider

TooltipProvider wraps your app and provides global tooltip functionality.

Key Properties

• delayDuration (number): 700, Delay before the tooltip appears.

• skipDelayDuration (number): 300, Skip delay duration when hiding.

• disableHoverableContent (boolean): false, Disable hoverable content.

TooltipRoot

TooltipRoot is the container that holds all the parts of a tooltip.

Key Properties

• defaultOpen (boolean): false, Whether the tooltip is open by default.

• open (boolean): false, Control the open state programmatically.

• onOpenChange (function): -, Callback for when the open state changes.

• delayDuration (number): 700, Delay before the tooltip appears.

• disableHoverableContent (boolean): false, Disable hoverable content.

TooltipTrigger

TooltipTrigger is the element that toggles the tooltip visibility.

Key Properties

• asChild (boolean): false, Passes the trigger to a child component.

TooltipPortal

TooltipPortal renders the tooltip content into a portal, allowing it to appear outside of the regular DOM hierarchy.

Key Properties

• forceMount (boolean): false, Always render the portal even when closed.

• container (HTMLElement): document.body, Container for the portal.

TooltipContent

TooltipContent is the popup element that appears when the tooltip is active.

Key Properties

• asChild (boolean): false, Passes the content to a child component.

• aria-label (string): -, ARIA label for accessibility.

• onEscapeKeyDown (function): -, Callback when the escape key is pressed.

• onPointerDownOutside (function): -, Callback when the pointer is clicked outside.

• forceMount (boolean): false, Always render the content even when closed.

• side (enum): "top", Side to position the tooltip.

• sideOffset (number): 0, Offset from the side.

• align (enum): "center", Alignment relative to the trigger.

• alignOffset (number): 0, Offset for alignment.

• avoidCollisions (boolean): true, Avoid collisions with the viewport.

• collisionBoundary (Boundary): [], Boundary to avoid collisions with.

• collisionPadding (number \| Padding): 0, Padding for collisions.

• arrowPadding (number): 0, Padding for the arrow.

• sticky (enum): "partial", Sticky behavior for the tooltip.

• hideWhenDetached (boolean): false, Hide tooltip when the trigger is detached.

TooltipArrow

TooltipArrow renders an optional arrow element that points towards the trigger.

• Key Properties asChild (boolean): false, Passes the arrow to a child component.

• width (number): 10, Width of the arrow.

• height (number): 5, Height of the arrow.