# Hover Card

Source: https://lumeo.nativ.sh/components/hover-card

# Hover Card

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

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## 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

Preview Code

Default

@blazor

Preview Code

Alignment

Start

Center

End

Preview Code

With Arrow

Hover me

Preview Code

User Profile

Created by

Jane Smith

on March 15, 2024.

## API Reference

### HoverCard

Prop

Type

Default

Description

ChildContent

RenderFragment?

null

Trigger and content elements.

Open

bool

false

Controls whether the hover card is visible.

OpenChanged

EventCallback<bool>

—

Callback invoked when the open state changes.

OpenDelay

int

200

Delay in milliseconds before opening on hover.

CloseDelay

int

300

Delay in milliseconds before closing on mouse leave.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

IsOpen

bool

false

Obsolete alias for Open; forwards to and from it.

IsOpenChanged

EventCallback<bool>

—

Obsolete alias for OpenChanged; forwards to and from it.

### HoverCardTrigger

Prop

Type

Default

Description

ChildContent

RenderFragment?

null

Hoverable trigger content.

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

### HoverCardContent

Prop

Type

Default

Description

ChildContent

RenderFragment?

null

Content displayed in the hover card.

Align

Lumeo.Align

Center

Horizontal alignment. Values: Start, Center, End.

ShowArrow

bool

false

Renders a small arrow pointing at the trigger.

Side

Lumeo.Side

Bottom

Preferred side for placement. Values: Top, Right, Bottom, Left.

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

## Related Components

-   [Tooltip](/components/tooltip) — For simple text hints on hover without rich content
-   [Popover](/components/popover) — For interactive floating content triggered by a click
-   [Card](/components/card) — For static content containers that are always visible