Hover Card
A card that appears when a user hovers over an element.
CS
@grizzly_codes
Staff Software Engineer working at vivenu GmbH
Joined Dezember 2011
Anatomy
To set up the hover card correctly, you’ll need to understand its anatomy and how we name its parts.
Each part includes a
data-partattribute to help identify them in the DOM.
Examples
Learn how to use the HoverCard component in your project. Let’s take a look at
the most basic example:
import { HoverCard, Portal } from '@ark-ui/react'
export const Basic = () => (
<HoverCard.Root>
<HoverCard.Trigger>Hover me</HoverCard.Trigger>
<Portal>
<HoverCard.Positioner>
<HoverCard.Content>
<HoverCard.Arrow>
<HoverCard.ArrowTip />
</HoverCard.Arrow>
Content
</HoverCard.Content>
</HoverCard.Positioner>
</Portal>
</HoverCard.Root>
)
import { Portal } from 'solid-js/web'
import { HoverCard } from '@ark-ui/solid'
export const Basic = () => (
<HoverCard.Root>
<HoverCard.Trigger>Hover me</HoverCard.Trigger>
<Portal>
<HoverCard.Positioner>
<HoverCard.Content>
<HoverCard.Arrow>
<HoverCard.ArrowTip />
</HoverCard.Arrow>
Content
</HoverCard.Content>
</HoverCard.Positioner>
</Portal>
</HoverCard.Root>
)
<script setup lang="ts">
import { HoverCard } from '@ark-ui/vue'
</script>
<template>
<HoverCard.Root>
<HoverCard.Trigger>Hover me</HoverCard.Trigger>
<Teleport to="body">
<HoverCard.Positioner>
<HoverCard.Content>
<HoverCard.Arrow>
<HoverCard.ArrowTip />
</HoverCard.Arrow>
Content
</HoverCard.Content>
</HoverCard.Positioner>
</Teleport>
</HoverCard.Root>
</template>
Controlled HoverCard
The controlled HoverCard component provides an interface for managing the
state of the hover card using the open and onOpenChange props:
import { useState } from 'react'
import { HoverCard, Portal } from '@ark-ui/react'
export const Controlled = () => {
const [isOpen, setOpen] = useState(false)
return (
<>
<button type="button" onClick={() => setOpen(!isOpen)}>
click me
</button>
<HoverCard.Root open={isOpen} onOpenChange={() => setOpen(false)}>
<HoverCard.Trigger>Hover me</HoverCard.Trigger>
<Portal>
<HoverCard.Positioner>
<HoverCard.Content>
<HoverCard.Arrow>
<HoverCard.ArrowTip />
</HoverCard.Arrow>
Content
</HoverCard.Content>
</HoverCard.Positioner>
</Portal>
</HoverCard.Root>
</>
)
}
import { createSignal } from 'solid-js'
import { Portal } from 'solid-js/web'
import { HoverCard } from '@ark-ui/solid'
export const Controlled = () => {
const [isOpen, setOpen] = createSignal(false)
return (
<>
<button type="button" onClick={() => setOpen(!isOpen)}>
click me
</button>
<HoverCard.Root open={isOpen()} onOpenChange={() => setOpen(false)}>
<HoverCard.Trigger>Hover me</HoverCard.Trigger>
<Portal>
<HoverCard.Positioner>
<HoverCard.Content>
<HoverCard.Arrow>
<HoverCard.ArrowTip />
</HoverCard.Arrow>
Content
</HoverCard.Content>
</HoverCard.Positioner>
</Portal>
</HoverCard.Root>
</>
)
}
<script setup lang="ts">
import { ref } from 'vue'
import { HoverCard } from '@ark-ui/vue'
const open = ref(false)
</script>
<template>
<button @click="() => (open = true)">Open Dialog</button>
<HoverCard.Root v-model:open="open">
<HoverCard.Trigger>Hover me</HoverCard.Trigger>
<Teleport to="body">
<HoverCard.Positioner>
<HoverCard.Content>
<HoverCard.Arrow>
<HoverCard.ArrowTip />
</HoverCard.Arrow>
Content
</HoverCard.Content>
</HoverCard.Positioner>
</Teleport>
</HoverCard.Root>
</template>
Custom Positioning
The HoverCard component can be customized in its placement and distance from
the trigger element through the positioning prop:
import { HoverCard, Portal } from '@ark-ui/react'
export const Positioning = () => (
<HoverCard.Root positioning={{ placement: 'right', gutter: 12 }}>
<HoverCard.Trigger>Hover me</HoverCard.Trigger>
<Portal>
<HoverCard.Positioner>
<HoverCard.Content>
<HoverCard.Arrow>
<HoverCard.ArrowTip />
</HoverCard.Arrow>
Content
</HoverCard.Content>
</HoverCard.Positioner>
</Portal>
</HoverCard.Root>
)
import { Portal } from 'solid-js/web'
import { HoverCard } from '@ark-ui/solid'
export const Positioning = () => (
<HoverCard.Root positioning={{ placement: 'right', gutter: 12 }}>
<HoverCard.Trigger>Hover me</HoverCard.Trigger>
<Portal>
<HoverCard.Positioner>
<HoverCard.Content>
<HoverCard.Arrow>
<HoverCard.ArrowTip />
</HoverCard.Arrow>
Content
</HoverCard.Content>
</HoverCard.Positioner>
</Portal>
</HoverCard.Root>
)
<script setup lang="ts">
import { HoverCard } from '@ark-ui/vue'
</script>
<template>
<HoverCard.Root
:positioning="{
placement: 'right',
gutter: 12,
}"
>
<HoverCard.Trigger>Hover me</HoverCard.Trigger>
<Teleport to="body">
<HoverCard.Positioner>
<HoverCard.Content>
<HoverCard.Arrow>
<HoverCard.ArrowTip />
</HoverCard.Arrow>
Content
</HoverCard.Content>
</HoverCard.Positioner>
</Teleport>
</HoverCard.Root>
</template>
Render Prop Usage
The HoverCard component can also accept a render prop, giving the user more
control over rendering behavior. This is useful for dynamically updating the
trigger based on the state of the HoverCard:
Story not foundStory not foundStory not foundAPI Reference
Root
| Prop | Type | Default |
|---|---|---|
closeDelayThe duration from when the mouse leaves the trigger or content until the hover card closes. | number | |
defaultOpenThe initial open state of the hover card when it is first rendered.
Use when you do not need to control its open state. | boolean | |
dirThe document's text/writing direction. | 'rtl' | 'ltr' | "ltr" |
getRootNodeA root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. | () => ShadowRoot | Node | Document | |
idThe unique identifier of the machine. | string | |
idsThe ids of the elements in the popover. Useful for composition. | Partial<{
trigger: string
content: string
positioner: string
arrow: string
}> | |
lazyMountWhether to enable lazy mounting | boolean | false |
onExitCompleteFunction called when the animation ends in the closed state. | () => void | |
onOpenChangeFunction called when the hover card opens or closes. | (details: OpenChangeDetails) => void | |
openWhether the hover card is open | boolean | |
openDelayThe duration from when the mouse enters the trigger until the hover card opens. | number | |
positioningThe user provided options used to position the popover content | PositioningOptions | |
presentWhether the node is present (controlled by the user) | boolean | |
unmountOnExitWhether to unmount on exit. | boolean | false |
Arrow
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
ArrowTip
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Content
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Positioner
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Trigger
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Previous
File UploadNext
Menu