ui / overlay

Tooltip

A focus-aware tooltip for concise supplementary labels.

PREVIEW READY

LIVE PREVIEWDARK / LIGHT COMPATIBLE

INSTALL / SOURCE REGISTRY

Add Tooltip to your project

The command adds the component source and its DesignOS base dependency.

$pnpm dlx shadcn@latest add https://designos.h4rithd.com/r/tooltip.json

registry/default/ui/tooltip.tsx

import * as React from "react"
import "@/components/designos/designos.css"

export function Tooltip({ children, content }: { children: React.ReactElement; content: React.ReactNode }) {
  const id = React.useId()
  return <span className="dos-tooltip">{React.cloneElement(children, { "aria-describedby": id } as React.HTMLAttributes<HTMLElement>)}<span role="tooltip" id={id} className="dos-tooltip__content">{content}</span></span>
}

Component contract

Source-owned after installation
Dark and light theme variables
Keyboard and visible-focus behavior
Reduced-motion fallback
Responsive from 320px upward
IBM Plex Sans + JetBrains Mono hierarchy