Follow
for updates.
<.text>
Follow
<.hover_card_root id="docs-hover-card-hero">
<.hover_card_trigger><.es_link href="#">@essence_ui</.es_link></.hover_card_trigger>
<.hover_card_content max_width="300px">
<.flex gap="4">
<.avatar
size="3"
fallback="R"
radius="full"
src="https://pbs.twimg.com/profile_images/1337055608613253126/r_eiMp2H_400x400.png"
/>
<.box>
<.heading size="3" as="h3">Essence</.heading>
<.box mb="2">
<.text as="div" size="2" color="gray">@essence_ui</.text>
</.box>
<.text as="div" size="2">
React components, icons, and colors for building high-quality, accessible UI.
</.text>
</.box>
</.flex>
</.hover_card_content>
</.hover_card_root>
for updates.
</.text>API Reference
This component inherits props from the Hover Card primitive. Content portals into container (default "body").
Root
Contains all the parts of the hover card.
| Prop | Type | Default | Description |
|---|---|---|---|
class
|
string
|
nil
|
|
close_delay
|
integer
|
150
|
Delay before hiding (ms) |
default_open
|
boolean
|
false
|
|
id
|
string
|
nil
|
|
on_open_change
|
string
|
nil
|
|
open
|
boolean
|
false
|
|
open_delay
|
integer
|
200
|
Delay before showing (ms) |
style
|
string
|
""
|
class
Type
string
Default
nil
close_delay
Delay before hiding (ms)
Type
integer
Default
150
default_open
Type
boolean
Default
false
id
Type
string
Default
nil
on_open_change
Type
string
Default
nil
open
Type
boolean
Default
false
open_delay
Delay before showing (ms)
Type
integer
Default
200
style
Type
string
Default
""
Trigger
Wraps the link that will open the hover card.
| Prop | Type | Default | Description |
|---|---|---|---|
class
|
string
|
nil
|
|
content_id
|
string
|
nil
|
|
id
|
string
|
nil
|
|
style
|
string
|
""
|
class
Type
string
Default
nil
content_id
Type
string
Default
nil
id
Type
string
Default
nil
style
Type
string
Default
""
Content
Contains the content of the open hover card.
| Prop | Type | Default | Description |
|---|---|---|---|
align
|
string
|
"start"
|
|
class
|
string
|
nil
|
|
container
|
string
|
"body"
|
|
height
|
any
|
—
|
Height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
id
|
string
|
nil
|
|
max_height
|
any
|
—
|
Max height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
max_width
|
any
|
—
|
Max width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
min_height
|
any
|
—
|
Min height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
min_width
|
any
|
—
|
Min width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
side
|
string
|
"bottom"
|
|
size
|
string
|
"2"
|
|
style
|
string
|
""
|
|
width
|
any
|
—
|
Width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
align
Type
string
Default
"start"
class
Type
string
Default
nil
container
Type
string
Default
"body"
height
Height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
id
Type
string
Default
nil
max_height
Max height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
max_width
Max width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
min_height
Min height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
min_width
Min width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
side
Type
string
Default
"bottom"
size
Type
string
Default
"2"
style
Type
string
Default
""
width
Width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
Examples
Size
Use the size prop to control the size.
<.flex gap="4" wrap="wrap">
<.hover_card_root id="docs-hover-card-size-1">
<.hover_card_trigger><.es_link href="#">Size 1</.es_link></.hover_card_trigger>
<.hover_card_content size="1" max_width="240px">
<.text as="div" size="1">
<.strong>Typography</.strong>
is the art and technique of arranging type to make written language legible, readable and appealing when displayed.
</.text>
</.hover_card_content>
</.hover_card_root>
<.hover_card_root id="docs-hover-card-size-2">
<.hover_card_trigger><.es_link href="#">Size 2</.es_link></.hover_card_trigger>
<.hover_card_content size="2" max_width="280px">
<.text as="div" size="2">
<.strong>Typography</.strong>
is the art and technique of arranging type to make written language legible, readable and appealing when displayed.
</.text>
</.hover_card_content>
</.hover_card_root>
<.hover_card_root id="docs-hover-card-size-3">
<.hover_card_trigger><.es_link href="#">Size 3</.es_link></.hover_card_trigger>
<.hover_card_content size="3" max_width="320px">
<.text as="div" size="3">
<.strong>Typography</.strong>
is the art and technique of arranging type to make written language legible, readable and appealing when displayed.
</.text>
</.hover_card_content>
</.hover_card_root>
</.flex>