RadCN
Overlaysreadycomponentready

Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Importimport { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger } from 'radcn/tooltip'
Preview

Live package example

The upstream Hover trigger and Add to library tooltip composition ported to RadCN.

Tooltip Demo

The upstream Hover trigger and Add to library tooltip composition ported to RadCN.

Preview
import { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger } from 'radcn/tooltip'

export function TooltipDemo() {
  return (
    <TooltipProvider delayDuration={0}>
      <Tooltip id="tooltip-demo">
        <TooltipTrigger class="radcn-button radcn-button--outline">Hover</TooltipTrigger>
        <TooltipPortal>
          <TooltipContent sideOffset={0}>
            <p>Add to library</p>
          </TooltipContent>
        </TooltipPortal>
      </Tooltip>
    </TooltipProvider>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger } from 'radcn/tooltip'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

  • Enhanced tooltips expose role="tooltip" and connect trigger to content with aria-describedby.
  • The Hover trigger is a native button styled with outline Button classes, so the upstream asChild Button trigger maps without nested interactive controls.
  • The named demo opens on pointer hover and keyboard focus, and closes when focus leaves or Escape is pressed.

Customization

  • Provider, root, trigger, portal, content, and arrow parts expose stable RadCN classes and data-radcn hooks.
  • Provider delayDuration={0} maps to delay metadata, and TooltipContent sideOffset={0} maps to data-side-offset="0".
  • Side, align, open state, portal placement, and arrow rendering are public behavior and styling surfaces.

Remix 3 Notes

  • use client, React component props, and Radix TooltipPrimitive.Provider/Root/Trigger/Portal/Content/Arrow map to server-rendered RadCN parts with scoped enhanceTooltip behavior.
  • TooltipTrigger asChild maps to styling RadCN TooltipTrigger with radcn-button radcn-button--outline classes, avoiding nested buttons while preserving the visible outline Button trigger.
  • className, Tailwind utilities, cn, data-slot, data-state, and data-side map to RadCN class, public data-radcn hooks, data-state, data-side, and package CSS.
  • Provider delayDuration = 0 and content sideOffset = 0 map to explicit RadCN props and data metadata.
  • Custom Tooltip tokens remain package-owned CSS variables and fixture-proven custom classes, not Tailwind runtime dependencies.
  • Vendor source remains read-only evidence and is not imported by RadCN.