Tooltip

A short hint shown next to its trigger.

TooltipProps packages/core/src/popups.ts:171 ↗

Tooltip rendered by Tarve — Native render. The live version loads when this comes into view.

Import

import { Tooltip } from "@tarve/core";

Usage

Tooltip.tsx

import { Button, Tooltip } from "@tarve/core";

let open = true;

<Tooltip
  id="save-tip"
  open={open}
  side="top"
  trigger={<Button>Save</Button>}
  content="Save (Ctrl+S)"
  onOpenChange={(next) => {
    open = next;
  }}
/>

Props

Prop	Type	Default
`content` required	`Child`	—
`id` required	`string`	—
`trigger` required	`Child`	—
`contentStyle`	`Style`	—
`label`	`string`	—
`onOpenChange`	`(open: boolean) => void`	—
`open` Controlled visibility. Omit it and the tooltip shows while its trigger is hovered, one at a time.	`boolean`	—
`side`	`PopupSide`	`"top"`

Common props

Shared by every component. See descriptions →

childrenclassclassNamehighlightkeymotionFromonHighlightonPasteonPointerLeaveonPointerMoveonSizeonTransitionEndrovingGroupstyle

Types

PopupSide

type PopupSide = "top" | "right" | "bottom" | "left";