Klarhimmel UI
Klarhimmel ↗

Tooltip

Stable

A short label for a control, shown on hover and keyboard focus. Built on Radix Tooltip.

npx shadcn add @klarhimmel/tooltip @klarhimmel/button

When to use

  • Use for

    Naming an icon, or showing the shortcut for a control.

  • Not for

    Text people need to finish a task. Touch screens never show it.

  • Pairs with

    Icon button (built in), Kbd.

Preview

Hover or tab to a control. Escape hides the tip.

tooltip.tsx
import { Theme } from '@/components/klarhimmel/theme/style';
import { Button } from '@/components/klarhimmel/ui/button';
import { Tooltip } from '@/components/klarhimmel/ui/tooltip';

export default function Example() {
  return (
    <Theme theme="brand">
      <Tooltip content="Copy the booking link" shortcut="C">
        <Button variant="secondary">Copy</Button>
      </Tooltip>
    </Theme>
  );
}

Install

Import

import { Tooltip, TooltipProvider } from '@/components/klarhimmel/ui/tooltip';
Lands in
components/klarhimmel/ui/tooltip.tsx, plus cn() and the theme item if they are missing. Import theme.css after Tailwind.
Render in
Render it inside <Theme>, once near the root of your app. Tokens and fonts are scoped to it, so outside it the component is unstyled.
Limit
Overlays render into the Theme root with position: fixed. A transform on an ancestor re-parents fixed (a dialog centres in the wrapper) and overflow: hidden clips menus. Render <Theme> at the app root, outside any transformed wrapper.

Examples

  • Open

    The tooltip opened by itself here so you can see it. On your page it opens on hover or keyboard focus.

    import { Bell } from 'lucide-react';
import { IconButton } from '@/components/klarhimmel/ui/icon-button';
import { Tooltip } from '@/components/klarhimmel/ui/tooltip';

export default function TooltipOpen() {
  return (
    <div className="flex flex-col items-start gap-3 pt-14">
      <Tooltip defaultOpen content="Notifications" shortcut="N">
        <IconButton label="Notifications" variant="secondary" noTooltip><Bell aria-hidden className="size-5" /></IconButton>
      </Tooltip>
      <p className="text-kh-small text-kh-muted">The tooltip opened by itself here so you can see it. On your page it opens on hover or keyboard focus.</p>
    </div>
  );
}

  • Shortcut

    import { Bookmark, Search } from 'lucide-react';
import { IconButton } from '@/components/klarhimmel/ui/icon-button';
import { Tooltip } from '@/components/klarhimmel/ui/tooltip';

export default function TooltipShortcut() {
  return (
    <div className="flex min-h-40 flex-wrap items-center gap-10">
      <IconButton label="Search" shortcut="/" variant="secondary" tooltipSide="top"><Search aria-hidden className="size-5" /></IconButton>
      <IconButton label="Save for later" shortcut="S" variant="secondary" tooltipSide="bottom" tooltipDelay={0}><Bookmark aria-hidden className="size-5" /></IconButton>
      <Tooltip side="bottom" content="A longer explanation wraps inside a narrow tip instead of running off the screen edge.">
        <button type="button" className="min-h-11 rounded-kh border border-kh-line-strong px-3 text-kh-small">Long tip</button>
      </Tooltip>
    </div>
  );
}

API reference

PropTypeDefaultDescription
contentReactNode-Required. Keep it to a few words.
shortcutstring-A key shown after the text.
side'top' | 'right' | 'bottom' | 'left''top'Where it opens; it flips to stay on screen.
delaynumber500Milliseconds before it opens on hover. Focus opens it at once.
childrenReactNode-Required. One focusable element.
TooltipProvider delaynumber500Wrap a toolbar or page once: its tooltips share one delay and the next opens at once when you move along.

Accessibility

KeyDoes
TabFocusing the control shows the tooltip
EscapeHides the tooltip
HoverShows after a short delay
Accessibility