Hover Card

A preview card that opens when a link is hovered.

@mmaachado

Maintains this port of shadcn/ui for Django.

Installation

uvx django_shadcn@latest add hover_card

Usage

Hover this link

Enough room for a sentence or two of context.

<c-hover-card>
    <c-hover-card.trigger>
        <a href="#">Hover this link</a>
    </c-hover-card.trigger>
    <c-hover-card.content>
        <p>Enough room for a sentence or two of context.</p>
    </c-hover-card.content>
</c-hover-card>

The card waits before opening and before closing, so crossing the gap between the link and the card does not dismiss it. Both delays are attributes: open_delay and close_delay, in milliseconds.

Examples

Alignment

Start

Aligned to the start.

End

Aligned to the end.

<c-hover-card.content align="start">...</c-hover-card.content>
<c-hover-card.content align="end">...</c-hover-card.content>

Slower

Takes its time

Opens after 700ms.

<c-hover-card open_delay="700" close_delay="300">
    ...
</c-hover-card>

Notes

As with the tooltip, side and align are choices rather than measurements — there is no portal and no collision detection. On a touch screen there is no hover, so anything behind a hover card needs to be reachable another way.