Skip to content
Yuzur1ha Open

Component referenceDraft

Tooltip

Tooltip adds brief supporting information to a focusable control. Essential instructions should remain visible in the page.

Updated

Design notes

Radix manages trigger interaction and placement. Keep the content short and respect reduced-motion preferences.

Design sourceOpen in Figma

Tooltip design

Inspect the original component, variants and visual details.

Playground

Playgrounddemo.tsx

content/components/tooltip/demo.tsx

import { Button, Tooltip } from "@yuzur1ha/ui"

export function TooltipDemo() {
  return (
    <div className="demo-tooltips">
      {(
        [
          { side: "top", label: "Top" },
          { side: "right", label: "Right" },
          { side: "bottom", label: "Bottom" },
          { side: "left", label: "Left" },
        ] as const
      ).map(({ side, label }) => (
        <Tooltip key={side} side={side} content="Visible only to you.">
          <Button appearance="secondary" size="small" data-tooltip-side={side}>
            {label}
          </Button>
        </Tooltip>
      ))}
    </div>
  )
}

API

Tooltip

A short text tooltip for one ref-capable trigger element. Opens after 250ms; positioning uses Radix collision handling.

TooltipProps
PropertyTypeRequiredDefaultDescription
contentstringYes—Short plain-text tooltip message.
side"left" | "right" | "bottom" | "top"No"top"Preferred side of the trigger; collision handling can change placement.
childrenReactElementYes—One ref-capable trigger element that accepts Radix interaction props.

No custom imperative methods. Event callbacks are listed as properties.