Hover Card
A card that appears when a user hovers over an element.
A card that appears when a user hovers over an element.
@grizzly_codes
Staff Software Engineer working at vivenu GmbH
Joined Dezember 2011
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-part
attribute to help identify them in the DOM.
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'
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 { HoverCard } from '@ark-ui/solid'
import { Portal } from 'solid-js/web'
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 { ref } from 'vue'
import { HoverCard } from '@ark-ui/vue'
const open = ref(false)
</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>
The controlled HoverCard
component provides an interface for managing the
state of the hover card using the open
and onOpenChange
props:
import { HoverCard, Portal } from '@ark-ui/react'
import { useState } from 'react'
const Controlled = () => {
const [isOpen, setOpen] = useState(false)
return (
<>
<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 { HoverCard } from '@ark-ui/solid'
import { createSignal } from 'solid-js'
import { Portal } from 'solid-js/web'
const Controlled = () => {
const [isOpen, setOpen] = createSignal(false)
return (
<>
<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>
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'
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 { HoverCard } from '@ark-ui/solid'
import { Portal } from 'solid-js/web'
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 { ref } from 'vue'
import { HoverCard } from '@ark-ui/vue'
const open = ref(false)
</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>
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
:
import { HoverCard, Portal } from '@ark-ui/react'
const RenderProp = () => (
<HoverCard.Root>
{(api) => (
<>
<HoverCard.Trigger>Hover me {api.isOpen ? '▲' : '▼'} </HoverCard.Trigger>
<Portal>
<HoverCard.Positioner>
<HoverCard.Content>
<HoverCard.Arrow>
<HoverCard.ArrowTip />
</HoverCard.Arrow>
Content
</HoverCard.Content>
</HoverCard.Positioner>
</Portal>
</>
)}
</HoverCard.Root>
)
import { HoverCard } from '@ark-ui/solid'
import { Portal } from 'solid-js/web'
const RenderProp = () => (
<HoverCard.Root>
{(api) => (
<>
<HoverCard.Trigger>Hover me {api().isOpen ? '▲' : '▼'} </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>
<HoverCard.Root v-slot="api">
<HoverCard.Trigger>Hover me {{ api.isOpen ? '▲' : '▼' }}</HoverCard.Trigger>
<Teleport to="body">
<HoverCard.Positioner>
<HoverCard.Content>
<HoverCard.Arrow>
<HoverCard.ArrowTip />
</HoverCard.Arrow>
Content
</HoverCard.Content>
</HoverCard.Positioner>
</Teleport>
</HoverCard.Root>
</template>
closeDelay The duration from when the mouse leaves the trigger or content until the hover card closes. | number | |
defaultOpen The initial open state of the hover card. | boolean | |
dir The document's text/writing direction. | 'ltr' | 'rtl' | "ltr" |
getRootNode A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. | () => Node | ShadowRoot | Document | |
id The unique identifier of the machine. | string | |
ids The ids of the elements in the popover. Useful for composition. | Partial<{
trigger: string
content: string
positioner: string
arrow: string
}> | |
lazyMount Whether to enable lazy mounting | boolean | false |
onExitComplete Function called when the animation ends in the closed state. | () => void | |
onOpenChange Function called when the hover card opens or closes. | (details: OpenChangeDetails) => void | |
open Whether the hover card is open | boolean | |
openDelay The duration from when the mouse enters the trigger until the hover card opens. | number | |
positioning The user provided options used to position the popover content | PositioningOptions | |
present Whether the node is present (controlled by the user) | boolean | |
unmountOnExit Whether to unmount on exit. | boolean | false |
asChild Render as a different element type. | boolean |
asChild Render as a different element type. | boolean |
asChild Render as a different element type. | boolean |
asChild Render as a different element type. | boolean |
asChild Render as a different element type. | boolean |
Previous
File UploadNext
Progress - Linear