HoverCard

Rich preview content shown while hovering a trigger.

HoverCardProps packages/core/src/extra-controls.ts:1134 ↗

Import

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

Usage

HoverCard.tsx

import { Avatar, HoverCard, Row, Text } from "@tarve/core";

let open = false;

<HoverCard
  open={open}
  trigger={<Text>@omarcosr</Text>}
  onOpenChange={(next) => {
    open = next;
  }}
>
  <Row gap={12} align="center">
    <Avatar fallback="MR" />
    <Text>Building native UI for Bun.</Text>
  </Row>
</HoverCard>

Props

Prop	Type	Default
`open` required	`boolean`	—
`trigger` required	`Child`	—
`onOpenChange`	`(open: boolean) => void`	—
`side`	`HoverCardSide`	`"bottom"`
`width`	`Style["width"]`	`280`

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

HoverCardSide

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