Tooltip

Usage

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  TooltipProvider,
} from '@acronis-platform/shadcn-uikit';

Basic

A simple tooltip on hover.

View source

import { Button } from '@acronis-platform/shadcn-uikit/react';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
  TooltipArrow,
} from '@acronis-platform/shadcn-uikit/react';

export function TooltipBasic() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>
          <Button variant="outline">Hover me</Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>Tooltip</p>
          <TooltipArrow />
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

With Icon

Tooltip triggered by an icon button.

View source

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
  TooltipArrow,
} from '@acronis-platform/shadcn-uikit/react';
import { InfoIcon } from '@acronis-platform/shadcn-uikit';
export function TooltipWithIcon() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger
          render={
            <button className="inline-flex items-center justify-center rounded-full w-6 h-6 bg-gray-200 hover:bg-gray-300 transition-colors" />
          }
        >
          <InfoIcon className="w-4 h-4 text-gray-600" />
        </TooltipTrigger>
        <TooltipContent>
          <p>Tooltip</p>
          <TooltipArrow />
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

Positions

Tooltips placed on different sides of the trigger.

View source

import { Button } from '@acronis-platform/shadcn-uikit/react';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
  TooltipArrow,
} from '@acronis-platform/shadcn-uikit/react';

export function TooltipPositions() {
  return (
    <div className="flex flex-col gap-8 items-center">
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger render={<Button variant="outline" />}>
            Top
          </TooltipTrigger>
          <TooltipContent side="top">
            <p>Tooltip on top</p>
            <TooltipArrow />
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>

      <div className="flex gap-8">
        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger render={<Button variant="outline" />}>
              Left
            </TooltipTrigger>
            <TooltipContent side="left">
              <p>Tooltip on left</p>
              <TooltipArrow />
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>

        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger render={<Button variant="outline" />}>
              Right
            </TooltipTrigger>
            <TooltipContent side="right">
              <p>Tooltip on right</p>
              <TooltipArrow />
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
      </div>

      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger render={<Button variant="outline" />}>
            Bottom
          </TooltipTrigger>
          <TooltipContent side="bottom">
            <p>Tooltip on bottom</p>
            <TooltipArrow />
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
    </div>
  );
}

Long Text

Tooltip with longer descriptive text.

View source

import { Button } from '@acronis-platform/shadcn-uikit/react';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
  TooltipArrow,
} from '@acronis-platform/shadcn-uikit/react';

export function TooltipLongText() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger render={<Button variant="outline" />}>
          Hover for details
        </TooltipTrigger>
        <TooltipContent className="max-w-xs">
          <p>
            This is a longer tooltip text that provides more detailed
            information about the element.
          </p>
          <TooltipArrow />
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

Custom Delay

Tooltip with a custom open/close delay.

View source

import { Button } from '@acronis-platform/shadcn-uikit/react';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
  TooltipArrow,
} from '@acronis-platform/shadcn-uikit/react';

export function TooltipCustomDelay() {
  return (
    <TooltipProvider delay={800}>
      <Tooltip>
        <TooltipTrigger>
          <Button variant="outline">Slow to appear</Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>This tooltip has a longer delay</p>
          <TooltipArrow />
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

Multiple

Several tooltips on different elements.

View source

import { Button } from '@acronis-platform/shadcn-uikit/react';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
  TooltipArrow,
} from '@acronis-platform/shadcn-uikit/react';

export function TooltipMultiple() {
  return (
    <TooltipProvider>
      <div className="flex gap-4">
        <Tooltip>
          <TooltipTrigger render={<Button variant="default" />}>
            Save
          </TooltipTrigger>
          <TooltipContent>
            <p>Save your changes</p>
            <TooltipArrow />
          </TooltipContent>
        </Tooltip>

        <Tooltip>
          <TooltipTrigger render={<Button variant="secondary" />}>
            Cancel
          </TooltipTrigger>
          <TooltipContent>
            <p>Discard changes</p>
            <TooltipArrow />
          </TooltipContent>
        </Tooltip>

        <Tooltip>
          <TooltipTrigger render={<Button variant="destructive" />}>
            Delete
          </TooltipTrigger>
          <TooltipContent>
            <p>Delete permanently</p>
            <TooltipArrow />
          </TooltipContent>
        </Tooltip>
      </div>
    </TooltipProvider>
  );
}

API Reference

TooltipContent

Prop

Type

TooltipProvider, Tooltip, and TooltipTrigger are direct re-exports of Base UI primitives.

Edit on GitHub

Tooltip

On this page