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

Default

Alignment

With Arrow

Side placement

Custom open / close delay

User Profile

Created by

on March 15, 2024.

API Reference

HoverCardTrigger

HoverCardContent

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