Tooltip

Import

import { Tooltip } from "@thenamespace/uikit";

Usage

import { Button, Tooltip } from "@thenamespace/uikit";
import {
  InformationCircleIcon,
  HugeiconsIcon,
} from "@thenamespace/uikit/icons";

Anatomy

Import the Tooltip component and access all parts using dot notation.

import { Tooltip, Button } from "@thenamespace/uikit";

export default () => (
  <Tooltip>
    <Tooltip.Trigger>
      <Button>Hover for tooltip</Button>
    </Tooltip.Trigger>
    <Tooltip.Content>
      <Tooltip.Arrow />
      Helpful information about this element
    </Tooltip.Content>
  </Tooltip>
);

With Arrow

import {Button, Tooltip} from "@thenamespace/uikit";

export function TooltipWithArrow() {
  return (
    <div className="flex items-center gap-4">

Placement

Hover buttons

import {Button, Tooltip} from "@thenamespace/uikit";

export function TooltipPlacement() {
  return (
    <div className="grid grid-cols-3 gap-4">

Custom Triggers

Active

import { Avatar, Chip, Tooltip } from "@thenamespace/uikit";
import {
  CheckmarkCircle02Icon,
  HelpCircleIcon,
  HugeiconsIcon,

Custom Render Function

"use client";

import { Button, Tooltip } from "@thenamespace/uikit";
import {
  InformationCircleIcon,

Styling

Global Delay Configuration

You can set default show and hide delays for all Tooltip components in your application by defining CSS variables:

/* In your global CSS file */
:root {
  --tooltip-delay: 1500ms;
  --tooltip-close-delay: 500ms;
}

/* You can also set different values for light/dark themes */
.light,
[data-theme="light"] {
  --tooltip-delay: 1200ms;
}

.dark,
[data-theme="dark"] {
  --tooltip-close-delay: 300ms;
}

Values accept CSS time units such as ms and s. These global settings are overridden by the delay and closeDelay props when specified on individual tooltips.

Passing Tailwind CSS classes

import { Tooltip, Button } from "@thenamespace/uikit";

function CustomTooltip() {
  return (
    <Tooltip>
      <Tooltip.Trigger>
        <Button>Hover me</Button>
      </Tooltip.Trigger>
      <Tooltip.Content className="bg-accent text-accent-foreground">
        <p>Custom styled tooltip</p>
      </Tooltip.Content>
    </Tooltip>
  );
}

Customizing the component classes

To customize the Tooltip component classes, you can use the @layer components directive.

Learn more.

@layer components {
  .tooltip {
    @apply rounded-xl shadow-lg;
  }

  .tooltip__trigger {
    @apply cursor-help;
  }
}

Namespace UIKit follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Tooltip component uses these CSS classes:

Base Classes

.tooltip - Base tooltip styles with animations
.tooltip__trigger - Trigger element styles

Interactive States

The component supports animation states:

Entering: [data-entering] - Applied during tooltip appearance
Exiting: [data-exiting] - Applied during tooltip disappearance
Placement: [data-placement="*"] - Applied based on tooltip position

API Reference

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Trigger element and content
`delay`	`number`	`1500` or CSS variable	Delay in milliseconds before showing the tooltip. Can be globally configured via `--tooltip-delay`
`closeDelay`	`number`	`500` or CSS variable	Delay in milliseconds before hiding the tooltip. Can be globally configured via `--tooltip-close-delay`
`trigger`	`"hover" \| "focus"`	`"hover"`	How the tooltip is triggered
`isDisabled`	`boolean`	`false`	Whether the tooltip is disabled

Tooltip.Content Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Content to display in the tooltip
`showArrow`	`boolean`	`false`	Whether to show the arrow indicator
`offset`	`number`	`3` (7 with arrow)	Distance from the trigger element
`placement`	`"top" \| "bottom" \| "left" \| "right"` (and variants)	`"top"`	Placement of the tooltip
`className`	`string`	-	Additional CSS classes
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, TooltipRenderProps>`	-	Overrides the default DOM element with a custom render function.

Tooltip.Trigger Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Element that triggers the tooltip
`className`	`string`	-	Additional CSS classes

Tooltip.Arrow Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Custom arrow element
`className`	`string`	-	Additional CSS classes
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, OverlayArrowRenderProps>`	-	Overrides the default DOM element with a custom render function.