HoverCard

A non-modal preview displayed when a target is hovered.

#Import

import { HoverCard, HoverCardToggle, HoverCardContent } from 'bmates-ui';

#Basic usage

The example below mirrors the primary Storybook composition and can be used as a starting point.

<HoverCard>
  <HoverCardToggle>@bmates</HoverCardToggle>
  <HoverCardContent>
    <strong>BMates UI</strong>
    <p>A React component library.</p>
  </HoverCardContent>
</HoverCard>

#Preview

<HoverCard>
  <HoverCardToggle>@bmates</HoverCardToggle>
  <HoverCardContent>
    <strong>BMates UI</strong>
    <p>A React component library.</p>
  </HoverCardContent>
</HoverCard>

#Prop previews

The examples below isolate the props that change visual output or interaction.

#Alignment

<HoverCard align="start">...</HoverCard>

#Open delay

<HoverCard openDelay={800}>...</HoverCard>

#Trigger spacing

<HoverCard space={24}>...</HoverCard>

#Component API

#Usage notes

• Every component in the table is exported from bmates-ui.
• Unless noted otherwise, a component also accepts the standard props of its underlying HTML element.
• For application-owned state, use a controlled value and its change handler instead of only a default* prop.