Tooltip

A floating label that provides supplementary information when an element is hovered or focused.

Overview

• Composed with a compound API: Tooltip.Provider, Tooltip, Tooltip.Trigger, Tooltip.Content, Tooltip.Arrow
• Wrapping a group of tooltips with Tooltip.Provider shares hover delay settings.
• Supports side and align positioning props on Tooltip.Content.
• Tooltip.Arrow renders an arrow caret pointing toward the trigger.

• Use Tooltip for short, supplementary text labels — 1–2 sentences maximum.
• Tooltip content should not be essential for understanding the UI; it supplements the trigger label.
• For interactive content (links, buttons, forms), use Popover instead.
• Always wrap multiple nearby tooltips in a shared Tooltip.Provider to coordinate hover delays.

Accessibility

• Tooltip content is exposed via role="tooltip" with the trigger linked via aria-describedby.
• Appears on both hover and focus, ensuring keyboard users can access the tooltip content.
• Disappears when the trigger loses hover or focus, or when Escape is pressed.
• Tooltip content should be supplementary — do not place critical information only in a tooltip, as some users may not discover it.

Import

import { Tooltip } from "@cocso-ui/react";

Default

"use client";

import { Button, Tooltip } from "@cocso-ui/react";

export default function TooltipDefault() {
  return (
    <div className="p-4">
      <Tooltip.Provider>
        <Tooltip>
          <Tooltip.Trigger render={<Button variant="secondary" />}>
            Hover me
          </Tooltip.Trigger>
          <Tooltip.Content>
            This is a tooltip
            <Tooltip.Arrow />
          </Tooltip.Content>
        </Tooltip>
      </Tooltip.Provider>
    </div>
  );
}

Positions

"use client";

import { Button, Tooltip } from "@cocso-ui/react";

export default function TooltipPositions() {
  return (
    <div className="flex flex-wrap gap-3 p-4">
      <Tooltip.Provider>
        {(["top", "bottom", "left", "right"] as const).map((side) => (
          <Tooltip key={side}>
            <Tooltip.Trigger render={<Button variant="outline" />}>{side}</Tooltip.Trigger>
            <Tooltip.Content side={side}>
              Tooltip on {side}
              <Tooltip.Arrow />
            </Tooltip.Content>
          </Tooltip>
        ))}
      </Tooltip.Provider>
    </div>
  );
}

API Reference

Tooltip.Provider

Tooltip (Root Container)

Tooltip.Trigger

Tooltip.Content

Tooltip.Arrow