HoverCard

A focusable preview that opens on hover, keyboard focus or explicit activation.

Preview

SideAlign

Disabled

Use HoverCard

HoverCard is a named export of @flood-md/react. Connect the package once, then import what you use.

PackageProject UI

"use client";

import { FloodRoot, HoverCard, Button, Text, Link } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <HoverCard title="Alex Morgan" trigger={props => <Button {...props} variant="subtle">Alex Morgan</Button>}>
        <Text as="p" size="compact">Designer at Flood.</Text>
        <Link href="https://github.com/tillwithered">View profile</Link>
      </HoverCard>
    </FloodRoot>
  );
}

Design notes

Interactive content belongs to a named dialog preview, not a tooltip.
Click pins the preview; keyboard and touch users can activate the trigger.

API reference

Prop	Values	Default
`title`	ReactNode	Required
`trigger`	(props: OverlayTriggerProps) => ReactNode	Required
`children`	ReactNode	Required
`side`	"top" \| "bottom" \| "left" \| "right"	—
`align`	"start" \| "center" \| "end"	—
`open`	boolean	—
`defaultOpen`	boolean	—
`onOpenChange`	(open: boolean) => void	—
`openDelay`	number	—
`closeDelay`	number	—
`disabled`	boolean	—
`closeLabel`	string	—
`Native HTML props`	Omit<HTMLAttributes<HTMLDivElement>, "children" \| "title" \| "role">	Forwarded

View TypeScript source

Page Markdown Agent skill