Hover Card

For sighted users to preview content available behind a link.

 import { Component } from '@angular/core';
import { RdxHoverCardModule } from '@radix-ng/primitives/hover-card';
import { LucideAngularModule, X } from 'lucide-angular';
 
@Component({
    selector: 'hover-card-demo',
    standalone: true,
    imports: [LucideAngularModule, RdxHoverCardModule],
    styleUrl: 'hover-card-demo.css',
    template: `
        <ng-container rdxHoverCardRoot>
            <a
                class="ImageTrigger"
                href="https://twitter.com/radix_ui"
                target="_blank"
                rel="noreferrer noopener"
                rdxHoverCardTrigger
            >
                <img
                    class="Image normal"
                    src="https://pbs.twimg.com/profile_images/1337055608613253126/r_eiMp2H_400x400.png"
                    alt="Radix UI"
                />
            </a>
 
            <ng-template rdxHoverCardContent>
                <div class="HoverCardContent" rdxHoverCardContentAttributes>
                    <div style="display: flex; flex-direction: column; gap: 7px">
                        <img
                            class="Image large"
                            src="https://pbs.twimg.com/profile_images/1337055608613253126/r_eiMp2H_400x400.png"
                            alt="Radix UI"
                        />
                        <div style="display: flex; flex-direction: column; gap: 15px;">
                            <div>
                                <div class="Text bold">Radix</div>
                                <div class="Text faded">{{ '@radix_ui' }}</div>
                            </div>
                            <div class="Text">
                                Components, icons, colors, and templates for building high-quality, accessible UI. Free
                                and open-source.
                            </div>
                            <div style="display: flex; gap: 15px">
                                <div style="display: flex; gap: 5px">
                                    <div class="Text bold">0</div>
                                    &nbsp;
                                    <div class="Text faded">Following</div>
                                </div>
                                <div style="display: flex; gap: 5px">
                                    <div class="Text bold">2,900</div>
                                    &nbsp;
                                    <div class="Text faded">Followers</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="HoverCardArrow" rdxHoverCardArrow></div>
                </div>
            </ng-template>
        </ng-container>
    `
})
export class HoverCardDemoComponent {
    protected readonly XIcon = X;
}

 .HoverCardContent {
    border-radius: 4px;
    padding: 20px;
    width: 300px;
    background-color: var(--mauve-1);
    box-shadow:
        hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
        hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
}
 
.HoverCardContent:focus {
    box-shadow:
        hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
        hsl(206 22% 7% / 20%) 0px 10px 20px -15px,
        0 0 0 2px var(--violet-7);
}
 
.ImageTrigger {
    cursor: pointer;
    border-radius: 100%;
    display: inline-block;
}
 
.ImageTrigger:focus {
    box-shadow: 0 0 0 2px var(--mauve-1);
}
 
.Image {
    display: block;
    border-radius: 100%;
}
 
.Image.normal {
    width: 45px;
    height: 45px;
}
 
.Image.large {
    width: 60px;
    height: 60px;
}
 
.Text {
    margin: 0;
    color: var(--mauve-12);
    font-size: 15px;
    line-height: 1.5;
}
 
.Text.bold {
    font-weight: 700;
}
 
.Text.faded {
    color: var(--mauve-10);
}
 
.HoverCardArrow {
    fill: var(--mauve-1);
}

Features

Can be controlled or uncontrolled.
Customize side, alignment, offsets, collision handling.
Optionally render a pointing arrow.
Supports custom open and close delays.
Ignored by screen readers.

Import

Get started with importing the directives:

 import {
  RdxHoverCardModule
} from '@radix-ng/primitives/hover-card';

Anatomy

 <ng-container rdxHoverCardRoot>
    <button rdxHoverCardTrigger></button>
 
    <ng-template rdxHoverCardContent>
        <div rdxHoverCardContentAttributes>
            <button rdxHoverCardClose></button>
            Hover Card Content
            <div rdxHoverCardArrow></div>
        </div>
    </ng-template>
</ng-container>

API Reference

Root

RdxHoverCardRootDirective

Contains all the parts of a hover-card.

Prop	Default	Type
`anchor`	`undefined`	`InputSignal<undefined \| RdxHoverCardAnchorDirective>` The anchor directive that comes from outside the hover-card rootDirective
`defaultOpen`	`false`	`InputSignalWithTransform<boolean, BooleanInput>` The open state of the hover-card when it is initially rendered. Use when you do not need to control its open state.
`open`	`undefined`	`InputSignalWithTransform<undefined \| boolean, BooleanInput>` The controlled state of the hover-card. `open` input takes precedence over `defaultOpen` input.
`openDelay`	`500`	`InputSignalWithTransform<number, NumberInput>` The delay in milliseconds before the hover-card opens.
`closeDelay`	`200`	`InputSignalWithTransform<number, NumberInput>` The delay in milliseconds before the hover-card closes.
`externalControl`	`undefined`	`InputSignalWithTransform<undefined \| boolean, BooleanInput>` Whether to control the state of the hover-card from outside. Use in conjunction with `open` input.
`cssAnimation`	`false`	`InputSignalWithTransform<boolean, BooleanInput>` Whether to take into account CSS opening/closing animations.
`cssOpeningAnimation`	`false`	`InputSignalWithTransform<boolean, BooleanInput>` Whether to take into account CSS opening animations. `cssAnimation` input must be set to 'true'
`cssClosingAnimation`	`false`	`InputSignalWithTransform<boolean, BooleanInput>` Whether to take into account CSS closing animations. `cssAnimation` input must be set to 'true'

Trigger

RdxHoverCardTriggerDirective

The button that toggles the hover-card. By default, the HoverCardContent will position itself against the trigger.

Content

RdxHoverCardContentDirective

The component that pops out when the hover-card is open.

Prop	Default	Type
`side`	`top`	`InputSignal<RdxPositionSide>` The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
`sideOffset`	`undefined`	`InputSignalWithTransform<number, NumberInput>` The distance in pixels from the trigger.
`align`	`center`	`InputSignal<RdxPositionAlign>` The preferred alignment against the trigger. May change when collisions occur.
`alignOffset`	`undefined`	`InputSignalWithTransform<number, NumberInput>` An offset in pixels from the "start" or "end" alignment options.
`alternatePositionsDisabled`	`false`	`InputSignalWithTransform<boolean, BooleanInput>` Whether to add some alternate positions of the content.
`onOverlayEscapeKeyDownDisabled`	`false`	`InputSignalWithTransform<boolean, BooleanInput>` Whether to prevent `onOverlayEscapeKeyDown` handler from calling.
`onOverlayOutsideClickDisabled`	`false`	`InputSignalWithTransform<boolean, BooleanInput>` Whether to prevent `onOverlayOutsideClick` handler from calling.

Arrow

RdxHoverCardArrowDirective

An optional arrow element to render alongside the hover-card. This can be used to help visually link the trigger with the HoverCardContent . Must be rendered inside HoverCardContent .

Prop	Default	Type
`width`	`10`	`InputSignalWithTransform<number, NumberInput>` The width of the arrow in pixels.
`height`	`5`	`InputSignalWithTransform<number, NumberInput>` The height of the arrow in pixels.

Close

RdxHoverCardCloseDirective

An optional close button element to render alongside the hover-card. This can be used to close the HoverCardContent . Must be rendered inside HoverCardContent .