Hover Card

Overview

Hovercard displays a floating preview panel when hovering over a trigger, commonly used for user profiles, link previews, or supplemental content.

Usage

HTML
React

<a href="/user/jane">@jane</a>
<div class="pm-hovercard pm-hovercard--bottom">
  <img src="avatar.jpg" alt="Jane" />
  <p>Jane Doe - Software Engineer</p>
</div>

import { Hovercard } from "@paramanu/overlays-react"

<Hovercard open={isHovering} placement="bottom">
  <img src="avatar.jpg" alt="Jane" />
  <p>Jane Doe - Software Engineer</p>
</Hovercard>

Guidelines

Use hover cards for non-essential preview content
Include a delay before showing to avoid accidental triggers
Content should be read-only (no interactive elements)
Provide keyboard-accessible alternatives for the same content

API

Prop	Type	Default	Description
`placement`	`HovercardPlacement`	`"bottom"`	Position relative to the trigger
`open`	`boolean`	`false`	Whether the hover card is visible