Tooltip

import { Tooltip } from "@rebasepro/ui";

Props

Prop	Type	Required	Description
open	boolean	—
defaultOpen	boolean	—
onOpenChange	(open: boolean) => void	—
side	"left" | "right" | "top" | "bottom"	—
align	"center" | "end" | "start"	—
sideOffset	number	—
title	React.ReactNode	—
delayDuration	number	—
asChild	boolean	—
tooltipClassName	string	—
tooltipStyle	React.CSSProperties	—
children	React.ReactNode	yes
className	string	—
container	HTMLElement	—
style	React.CSSProperties	—

Example

This is the example the design-system sync renders and verifies for this component.

import { Tooltip, IconButton, KeyIcon } from "@rebasepro/ui";

// Tooltip supports both `open` and `defaultOpen` per the .d.ts — use the
// controlled `open` (+ no-op onOpenChange) to force the visible state, same
// as Popover/Select. Content renders through a Radix portal, so it escapes
// the grid card — needs cfg.overrides.Tooltip = { cardMode: "single", primaryStory: "Default" }.

export const Default = () => (
    <div className="p-4 h-[280px] flex items-center justify-center">
        <Tooltip open onOpenChange={() => {}} title="Copy connection string" side="top">
            <IconButton size="small" aria-label="Copy"><KeyIcon size={16}/></IconButton>
        </Tooltip>
    </div>
);