Hover Card

Anatomy

Rich hover overlay with configurable placement and alignment for user profiles, tooltips, and detailed previews.

maud_ui::primitives::hover_card

Props

Generated from public Rust fields. Defaults are evaluated from the implementation.

Prop	Type	Default	Description
`trigger`	`Markup`	`PreEscaped("")`	The trigger element (link, button, text, etc.)
`content`	`Markup`	`PreEscaped("")`	The rich content displayed in the card
`id`	`String`	`"hover-card"`	Unique identifier for the card
`open_delay_ms`	`u32`	`300`	Delay in milliseconds before showing (default 300)
`close_delay_ms`	`u32`	`200`	Delay in milliseconds before closing (default 200)
`side`	`Placement`	`Bottom`	Which side of the trigger to anchor the card to (default: Bottom)
`align`	`Align`	`Center`	Alignment along the trigger edge (default: Center)

Examples

HoverCard — Bottom / Center (default)

HoverCard — Top / End

HoverCard — Right / Start

Usage and composition

Import

use maud_ui::primitives::hover_card::{self, Props, Placement, Align};

Example

use maud::html;
use maud_ui::primitives::hover_card;

html! {
    (hover_card::render(hover_card::Props {
        trigger: html! { a href="#" { "@jane" } },
        content: html! {
            div { "Jane Doe" }
            p { "Software designer" }
        },
        id: "user-card-1".to_string(),
        side: hover_card::Placement::Bottom,
        align: hover_card::Align::Center,
        ..Default::default()
    }))
}

Placement

pub enum Placement {
    Top,
    Right,
    Bottom,    // default
    Left,
}

Align

pub enum Align {
    Start,
    Center,    // default
    End,
}

Shadcn Reference

Mirrors shadcn's HoverCard with Placement and Align variants. Positioning is CSS-driven via data attributes.

Accessibility

Trigger is a semantic link or button.
Card hidden by default with hidden attribute.
Uses data-visible="false" for CSS state management.
No ARIA live region by default (async JavaScript handles visibility).