https://framer.com/m/HoverCard-DP02.js

_ __ _ (_)___ ____/ /__ _____(_)___ _____ / / __ \ / __ / _ \/ ___/ / __ `/ __ \ / / /_/ / / /_/ / __(__ ) / /_/ / / / / /_/\____/ \__,_/\___/____/_/\__, /_/ /_/ /____/ __ _______ _______/ /____ ____ ___ / ___/ / / / ___/ __/ _ \/ __ `__ \ (__ ) /_/ (__ ) /_/ __/ / / / / / /____/\__, /____/\__/\___/_/ /_/ /_/ /____/

Hello, Design System
你好，设计系统
こんにちは、デザインシステム
안녕하세요, 디자인 시스템
Hola, Sistema de Diseño
Bonjour, Design System
Hallo, Designsystem
Olá, Sistema de Design
Привет, дизайн-система
مرحبًا، نظام التصميم

UI Text

io

The System

UI Basics

Enhancements

Io / UI Basics / HoverCardX

HoverCardX

HoverCardX is the tooltip’s bigger sibling: the thing that opens has its own layout rather than a single line of text. Like TooltipX it only appears on hover or focus, so the specimens below show the triggers — hover one to see the card.

Interactivehover card4 sidestouch fallback

Examples

Live specimens for every control the component exposes.

Default

A trigger with a card attached. Hover it to see the card — a static render cannot show it.

Side

side places the card on one of four sides of the trigger; sideOffset sets how far off it sits.

side top

side right

side bottom

side left

Delay

openDelay stops the card firing on a passing pointer; closeDelay gives the reader time to move onto it.

openDelay 0 · closeDelay 0

openDelay 600 · closeDelay 500

Shape

radius, padding and useArrow shape the card. Dropping the arrow makes it read as a panel rather than a pointer.

useArrow true · radius 10

useArrow false · radius 4 · padding 20

Touch

mobileBehavior decides what happens where there is no hover: open as a popover on tap, hide entirely, or keep the hover behaviour.

mobileBehavior popover

mobileBehavior hide

Props

The controls exposed on the instance panel.

Prop	Type	Behaviour
triggerButton	slot	The element the card is attached to.
content	slot	What the card contains.
side	enum	top · right · bottom · left, relative to the trigger.
sideOffset	number	Distance between trigger and card.
openDelay	number	How long the pointer must rest before it opens.
closeDelay	number	How long it stays after the pointer leaves.
useArrow	boolean	Draws the pointer at the card’s edge.
usePortal	boolean	Renders the card in a portal, above everything else.
mobileBehavior	enum	popover · hide · force-hover — what touch devices get.
background	color	Card background.
border	border	Card outline.
radius	number	Corner radius of the card.
padding	number	Inner padding of the card.
shadow	shadow	Card shadow.
enableTriggerInteraction	boolean	Turns on the trigger interaction hook.
triggerInteraction	object	How the trigger reacts when it is used.
enableContentInteraction	boolean	Turns on the content interaction hook.
contentInteraction	object	How the card reacts when it appears.

Prop	Type	Behaviour
triggerButton	slot	The element the card is attached to.
content	slot	What the card contains.
side	enum	top · right · bottom · left, relative to the trigger.
sideOffset	number	Distance between trigger and card.
openDelay	number	How long the pointer must rest before it opens.
closeDelay	number	How long it stays after the pointer leaves.
useArrow	boolean	Draws the pointer at the card’s edge.
usePortal	boolean	Renders the card in a portal, above everything else.
mobileBehavior	enum	popover · hide · force-hover — what touch devices get.
background	color	Card background.
border	border	Card outline.
radius	number	Corner radius of the card.
padding	number	Inner padding of the card.
shadow	shadow	Card shadow.
enableTriggerInteraction	boolean	Turns on the trigger interaction hook.
triggerInteraction	object	How the trigger reacts when it is used.
enableContentInteraction	boolean	Turns on the content interaction hook.
contentInteraction	object	How the card reacts when it appears.

Usage

Guidance carried over from the component definition.

Reach for HoverCardX

What opens needs layout — a heading, body, maybe an image.

A preview should be available without navigating away.

Touch devices need a defined fallback.

The card should sit above everything else via a portal.

Reach for something else

The hint is one short line — use TooltipX.

It must open on click and stay open.

The content should always be visible.

Io — UI Basics

Every trigger above is wired to a live HoverCardX instance with a slotted card. The card is only rendered on hover or focus, which a static page cannot capture.