Ark UI

Usage

To get started, import the necessary components from the package:

import {
  HoverCard,
  HoverCardTrigger,
  HoverCardContent,
  HoverCardArrow,
  HoverCardArrowTip,
  HoverCardPositioner,
  Portal,
} from '@ark-ui/react'

Here is an example of how to use the HoverCard component:

import { Portal } from '@zag-js/react'
import { useState } from 'react'
import {
  HoverCard,
  HoverCardArrow,
  HoverCardArrowTip,
  HoverCardContent,
  HoverCardPositioner,
  HoverCardTrigger,
} from '@ark-ui/react'

const Basic = () => (
  <HoverCard>
    <HoverCardTrigger>Hover me</HoverCardTrigger>
    <Portal>
      <HoverCardPositioner>
        <HoverCardContent>
          <HoverCardArrow>
            <HoverCardArrowTip />
          </HoverCardArrow>
          Content
        </HoverCardContent>
      </HoverCardPositioner>
    </Portal>
  </HoverCard>
)

import { createSignal } from 'solid-js'
import { Portal } from 'solid-js/web'
import {
  HoverCard,
  HoverCardArrow,
  HoverCardArrowTip,
  HoverCardContent,
  HoverCardPositioner,
  HoverCardTrigger,
} from '@ark-ui/solid'

const Basic = () => (
  <HoverCard>
    <HoverCardTrigger>Hover me</HoverCardTrigger>
    <Portal>
      <HoverCardPositioner>
        <HoverCardContent>
          <HoverCardArrow>
            <HoverCardArrowTip />
          </HoverCardArrow>
          Content
        </HoverCardContent>
      </HoverCardPositioner>
    </Portal>
  </HoverCard>
)

<script setup lang="ts">
import {
  HoverCard,
  HoverCardArrow,
  HoverCardArrowTip,
  HoverCardContent,
  HoverCardPositioner,
  HoverCardTrigger,
} from '.'
</script>

<template>
  <HoverCard>
    <HoverCardTrigger>Hover me</HoverCardTrigger>
    <Teleport to="body">
      <HoverCardPositioner>
        <HoverCardContent>
          <HoverCardArrow>
            <HoverCardArrowTip />
          </HoverCardArrow>
          Content
        </HoverCardContent>
      </HoverCardPositioner>
    </Teleport>
  </HoverCard>
</template>

The controlled HoverCard component provides an interface for managing the state of the hover card using the open prop. The onClose prop is called when the hover card needs to be closed:

import { Portal } from '@zag-js/react'
import { useState } from 'react'
import {
  HoverCard,
  HoverCardArrow,
  HoverCardArrowTip,
  HoverCardContent,
  HoverCardPositioner,
  HoverCardTrigger,
} from '@ark-ui/react'

const Controlled = () => {
  const [isOpen, setOpen] = useState(false)
  return (
    <>
      <button onClick={() => setOpen(!isOpen)}>click me</button>
      <HoverCard open={isOpen} onOpenChange={() => setOpen(false)}>
        <HoverCardTrigger>Hover me</HoverCardTrigger>
        <Portal>
          <HoverCardPositioner>
            <HoverCardContent>
              <HoverCardArrow>
                <HoverCardArrowTip />
              </HoverCardArrow>
              Content
            </HoverCardContent>
          </HoverCardPositioner>
        </Portal>
      </HoverCard>
    </>
  )
}

import { createSignal } from 'solid-js'
import { Portal } from 'solid-js/web'
import {
  HoverCard,
  HoverCardArrow,
  HoverCardArrowTip,
  HoverCardContent,
  HoverCardPositioner,
  HoverCardTrigger,
} from '@ark-ui/solid'

const Controlled = () => {
  const [isOpen, setOpen] = createSignal(false)
  return (
    <>
      <button onClick={() => setOpen(!isOpen)}>click me</button>
      <HoverCard open={isOpen()} onOpenChange={() => setOpen(false)}>
        <HoverCardTrigger>Hover me</HoverCardTrigger>
        <Portal>
          <HoverCardPositioner>
            <HoverCardContent>
              <HoverCardArrow>
                <HoverCardArrowTip />
              </HoverCardArrow>
              Content
            </HoverCardContent>
          </HoverCardPositioner>
        </Portal>
      </HoverCard>
    </>
  )
}

Story not available

Custom Positioning

The HoverCard component can be customized in its placement and distance from the trigger element through the positioning prop:

import { Portal } from '@zag-js/react'
import { useState } from 'react'
import {
  HoverCard,
  HoverCardArrow,
  HoverCardArrowTip,
  HoverCardContent,
  HoverCardPositioner,
  HoverCardTrigger,
} from '@ark-ui/react'

const Positioning = () => (
  <HoverCard positioning={{ placement: 'right', gutter: 12 }}>
    <HoverCardTrigger>Hover me</HoverCardTrigger>
    <Portal>
      <HoverCardPositioner>
        <HoverCardContent>
          <HoverCardArrow>
            <HoverCardArrowTip />
          </HoverCardArrow>
          Content
        </HoverCardContent>
      </HoverCardPositioner>
    </Portal>
  </HoverCard>
)

import { createSignal } from 'solid-js'
import { Portal } from 'solid-js/web'
import {
  HoverCard,
  HoverCardArrow,
  HoverCardArrowTip,
  HoverCardContent,
  HoverCardPositioner,
  HoverCardTrigger,
} from '@ark-ui/solid'

const Positioning = () => (
  <HoverCard positioning={{ placement: 'right', gutter: 12 }}>
    <HoverCardTrigger>Hover me</HoverCardTrigger>
    <Portal>
      <HoverCardPositioner>
        <HoverCardContent>
          <HoverCardArrow>
            <HoverCardArrowTip />
          </HoverCardArrow>
          Content
        </HoverCardContent>
      </HoverCardPositioner>
    </Portal>
  </HoverCard>
)

Story not available

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:

import { Portal } from '@zag-js/react'
import { useState } from 'react'
import {
  HoverCard,
  HoverCardArrow,
  HoverCardArrowTip,
  HoverCardContent,
  HoverCardPositioner,
  HoverCardTrigger,
} from '@ark-ui/react'

const RenderProp = () => (
  <HoverCard>
    {(api) => (
      <>
        <HoverCardTrigger>Hover me {api.isOpen ? '▲' : '▼'} </HoverCardTrigger>
        <Portal>
          <HoverCardPositioner>
            <HoverCardContent>
              <HoverCardArrow>
                <HoverCardArrowTip />
              </HoverCardArrow>
              Content
            </HoverCardContent>
          </HoverCardPositioner>
        </Portal>
      </>
    )}
  </HoverCard>
)

import { createSignal } from 'solid-js'
import { Portal } from 'solid-js/web'
import {
  HoverCard,
  HoverCardArrow,
  HoverCardArrowTip,
  HoverCardContent,
  HoverCardPositioner,
  HoverCardTrigger,
} from '@ark-ui/solid'

const RenderProp = () => (
  <HoverCard>
    {(api) => (
      <>
        <HoverCardTrigger>Hover me {api().isOpen ? '▲' : '▼'} </HoverCardTrigger>
        <Portal>
          <HoverCardPositioner>
            <HoverCardContent>
              <HoverCardArrow>
                <HoverCardArrowTip />
              </HoverCardArrow>
              Content
            </HoverCardContent>
          </HoverCardPositioner>
        </Portal>
      </>
    )}
  </HoverCard>
)

Story not available

Conclusion

The HoverCard component is an intuitive and powerful tool for displaying contextual information in your applications. With its range of features and high degree of customizability, it can meet a wide variety of design and functionality requirements.

Hover Card

Usage

Controlled HoverCard

Custom Positioning

Render Prop Usage

Conclusion