Skip to content
NewService Map: 30 components for hosts, ports and routes
<PxTooltip />ReactActions & feedbackFree

Tooltip

Tooltip whose bubble grows out of its arrow pixel by pixel on hover or keyboard focus before the text fades in; Escape hides it.

View as Markdown
<PxTooltip />

Trytab onto the buttons.

Playground

Change a prop and the component re-renders. Props marked remounts set an initial value, so the component starts over.

Loading <PxTooltip />
Props
contentlive
placementlive
delaylive
defaultOpenremounts
React
<PxTooltip content="Copy link" placement="top" delay={250}>Hover me</PxTooltip>

Installation

pnpm dlx shadcn@latest add @lumesec/px-tooltip
First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/px-tooltip.json

Usage

px-tooltip-example.tsx
import { PxTooltip } from "@/components/lumesec/px-tooltip";

export function Example() {
  return (
    <PxTooltip content="Copy link">
      <button type="button">Copy</button>
    </PxTooltip>
  );
}

Behaviour

The bubble grows out of its arrow pixel by pixel on hover or keyboard focus, then the text fades in. Escape hides it.

API reference

Props

Also accepts every prop of <span> (React.ComponentProps<"span">), spread onto the root element.

contentTypeReact.ReactNode

Tooltip text. It does not wrap.

childrenTypeReact.ReactNode

The trigger, usually a button. A single element gets aria-describedby pointing at the tooltip.

placementType"top" | "bottom"Default"top"

bottom places the bubble below the trigger.

delayTypenumberDefault250

Milliseconds of hover or focus before the bubble opens.

openTypeboolean

Controlled open state. Use with onOpenChange.

defaultOpenTypebooleanDefaultfalse

Initial open state when uncontrolled.

onOpenChangeType(open: boolean) => void

Called when hover, focus or Escape opens or closes the tooltip.

Ref

ref points at the root HTMLSpanElement.

Keyboard

KeysAction
EscapeHide the tooltip, wherever focus is.

Accessibility

  • The bubble has role="tooltip" and stays in the DOM (hidden when closed); the trigger references it with aria-describedby, merged with any value the trigger already has.
  • It opens on keyboard focus as well as hover, and closes 60 ms after focus or the pointer leaves.
  • The bubble does not take pointer events.
  • Reduced motion: the bubble appears at full size at once instead of growing from the arrow.

Theming

Styled with Tailwind classes on your shadcn theme tokens, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --foreground, --muted and --card.

Notes

  • The bubble is centred on the trigger, does not wrap its text and does not flip or shift to stay inside the viewport.
  • The root is an inline-block span around the trigger; pointer and focus handlers passed to it still run.

Related

<px-button>
Async buttonpx-buttonOpen Async button
<px-confirm>
Two-step deletepx-confirmOpen Two-step delete
<px-toaster>
Toastspx-toasterOpen Toasts
<px-progress>
Progress barpx-progressOpen Progress bar

Was this page helpful?