Lumeo

Hover Card

A card that appears when hovering over an element, showing additional information.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<HoverCard />

When to Use

  • User profile previews on hover over usernames or avatars
  • Link previews showing a summary before the user clicks through
  • Quick info cards that provide context without requiring a page navigation

Created by

Jane Smith
on March 15, 2024.

API Reference

HoverCard

Prop Type Default Description
ChildContentRenderFragment?nullTrigger and content elements.
OpenboolfalseControls whether the hover card is visible.
OpenChangedEventCallback<bool>—Callback invoked when the open state changes.
OpenDelayint200Delay in milliseconds before opening on hover.
CloseDelayint300Delay in milliseconds before closing on mouse leave.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.
IsOpenboolfalseObsolete alias for Open; forwards to and from it.
IsOpenChangedEventCallback<bool>—Obsolete alias for OpenChanged; forwards to and from it.

HoverCardTrigger

Prop Type Default Description
ChildContentRenderFragment?nullHoverable trigger content.
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.

HoverCardContent

Prop Type Default Description
ChildContentRenderFragment?nullContent displayed in the hover card.
AlignLumeo.AlignCenterHorizontal alignment. Values: Start, Center, End.
ShowArrowboolfalseRenders a small arrow pointing at the trigger.
SideLumeo.SideBottomPreferred side for placement. Values: Top, Right, Bottom, Left.
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.

Related Components

  • Tooltip — For simple text hints on hover without rich content
  • Popover — For interactive floating content triggered by a click
  • Card — For static content containers that are always visible