Radix2Solid

Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

Hover Card

For sighted users to preview content available behind a link.

Download runnable sandbox
import { HoverCard } from "@radix-solid/primitives";

import styles from "./styles.module.css";

const HoverCardDemo = () => <HoverCard.Root>

		<HoverCard.Trigger asChild>{target => target("a", {

      "class": styles.ImageTrigger,

      "href": "https://twitter.com/radix_ui",

      "target": "_blank",

      "rel": "noreferrer noopener",

      children: <>

				<img class={`${styles.Image} normal`} src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' fill='%231C2024'%3E%3Cpath d='M17 35C10.3726 35 5 30.0751 5 24C5 17.9249 10.3726 13 17 13L17 35Z'/%3E%3Crect x='5' width='12' height='12'/%3E%3Ccircle cx='24' cy='6' r='6'/%3E%3C/svg%3E" alt="Radix UI" />

			</>

    })}</HoverCard.Trigger>

		<HoverCard.Portal>

			<HoverCard.Content class={styles.Content} sideOffset={5}>

				<div style={{
        "display": "flex",
        "flex-direction": "column",
        "gap": "7px"
      }}>

					<img class={`${styles.Image} large`} src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' fill='%231C2024'%3E%3Cpath d='M17 35C10.3726 35 5 30.0751 5 24C5 17.9249 10.3726 13 17 13L17 35Z'/%3E%3Crect x='5' width='12' height='12'/%3E%3Ccircle cx='24' cy='6' r='6'/%3E%3C/svg%3E" alt="Radix UI" />

					<div style={{
          "display": "flex",
          "flex-direction": "column",
          "gap": "15px"
        }}>

						<div>

							<div class={`${styles.Text} bold`}>Radix</div>

							<div class={`${styles.Text} faded`}>@radix_ui</div>

						</div>

						<div class={styles.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={`${styles.Text} bold`}>0</div>{" "}

								<div class={`${styles.Text} faded`}>Following</div>

							</div>

							<div style={{
              "display": "flex",
              "gap": "5px"
            }}>

								<div class={`${styles.Text} bold`}>2,900</div>{" "}

								<div class={`${styles.Text} faded`}>Followers</div>

							</div>

						</div>

					</div>

				</div>



				<HoverCard.Arrow class={styles.Arrow} />

			</HoverCard.Content>

		</HoverCard.Portal>

	</HoverCard.Root>;

export default HoverCardDemo;

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.

Anatomy

Import all parts and piece them together.

import { HoverCard } from "@radix-solid/primitives";

export default () => <HoverCard.Root>

		<HoverCard.Trigger />

		<HoverCard.Portal>

			<HoverCard.Content>

				<HoverCard.Arrow />

			</HoverCard.Content>

		</HoverCard.Portal>

	</HoverCard.Root>;

API Reference

Root

Contains all the parts of a hover card.

PropTypeDefault
defaultOpenboolean—
openboolean—
onOpenChangefunction—
openDelaynumber700
closeDelaynumber300

Trigger

The link that opens the hover card when hovered.

PropTypeDefault
asChildbooleanfalse
Data attributeValues
[data-state]"open" | "closed"

Portal

When used, portals the content part into the body.

PropTypeDefault
forceMountboolean—
containerHTMLElementdocument.body

Content

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

PropTypeDefault
asChildbooleanfalse
forceMountboolean—
sideenum"bottom"
sideOffsetnumber0
alignenum"center"
alignOffsetnumber0
avoidCollisionsbooleantrue
collisionBoundaryBoundary[]
collisionPaddingnumber | Padding0
arrowPaddingnumber0
stickyenum"partial"
hideWhenDetachedbooleanfalse
Data attributeValues
[data-state]"open" | "closed"
[data-side]"left" | "right" | "bottom" | "top"
[data-align]"start" | "end" | "center"
CSS VariableDescription
--radix-hover-card-content-transform-originThe transform-origin computed from the content and arrow positions/offsets
--radix-hover-card-content-available-widthThe remaining width between the trigger and the boundary edge
--radix-hover-card-content-available-heightThe remaining height between the trigger and the boundary edge
--radix-hover-card-trigger-widthThe width of the trigger
--radix-hover-card-trigger-heightThe height of the trigger

Arrow

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

PropTypeDefault
asChildbooleanfalse
widthnumber10
heightnumber5

Examples

Show instantly

Use the openDelay prop to control the time it takes for the hover card to open.

import { HoverCard } from "@radix-solid/primitives";

export default () => <HoverCard.Root openDelay={0}>

		<HoverCard.Trigger>…</HoverCard.Trigger>

		<HoverCard.Content>…</HoverCard.Content>

	</HoverCard.Root>;

Constrain the content size

You may want to constrain the width of the content so that it matches the trigger width. You may also want to constrain its height to not exceed the viewport.

We expose several CSS custom properties such as --radix-hover-card-trigger-width and --radix-hover-card-content-available-height to support this. Use them to constrain the content dimensions.

// index.tsx

import { HoverCard } from "@radix-solid/primitives";

import "./styles.css";

export default () => <HoverCard.Root>

		<HoverCard.Trigger>…</HoverCard.Trigger>

		<HoverCard.Portal>

			<HoverCard.Content class="HoverCardContent" sideOffset={5}>

				…

			</HoverCard.Content>

		</HoverCard.Portal>

	</HoverCard.Root>;
/* styles.css */

.HoverCardContent {

	width: var(--radix-hover-card-trigger-width);

	max-height: var(--radix-hover-card-content-available-height);

}

Origin-aware animations

We expose a CSS custom property --radix-hover-card-content-transform-origin. Use it to animate the content from its computed origin based on side, sideOffset, align, alignOffset and any collisions.

// index.tsx

import { HoverCard } from "@radix-solid/primitives";

import "./styles.css";

export default () => <HoverCard.Root>

		<HoverCard.Trigger>…</HoverCard.Trigger>

		<HoverCard.Content class="HoverCardContent">…</HoverCard.Content>

	</HoverCard.Root>;
/* styles.css */

.HoverCardContent {

	transform-origin: var(--radix-hover-card-content-transform-origin);

	animation: scaleIn 0.5s ease-out;

}



@keyframes scaleIn {

	from {

		opacity: 0;

		transform: scale(0);

	}

	to {

		opacity: 1;

		transform: scale(1);

	}

}

Collision-aware animations

We expose data-side and data-align attributes. Their values will change at runtime to reflect collisions. Use them to create collision and direction-aware animations.

// index.tsx

import { HoverCard } from "@radix-solid/primitives";

import "./styles.css";

export default () => <HoverCard.Root>

		<HoverCard.Trigger>…</HoverCard.Trigger>

		<HoverCard.Content class="HoverCardContent">…</HoverCard.Content>

	</HoverCard.Root>;
/* styles.css */

.HoverCardContent {

	animation-duration: 0.6s;

	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);

}

.HoverCardContent[data-side="top"] {

	animation-name: slideUp;

}

.HoverCardContent[data-side="bottom"] {

	animation-name: slideDown;

}



@keyframes slideUp {

	from {

		opacity: 0;

		transform: translateY(10px);

	}

	to {

		opacity: 1;

		transform: translateY(0);

	}

}



@keyframes slideDown {

	from {

		opacity: 0;

		transform: translateY(-10px);

	}

	to {

		opacity: 1;

		transform: translateY(0);

	}

}

Accessibility

The hover card is intended for sighted users only, the content will be inaccessible to keyboard users.

Keyboard Interactions

KeyDescription
Tab
Opens/closes the hover card.
Enter
Opens the hover card link