Hover Card

A floating card that appears on hover to display rich content.

@barefootjs

JSX to Marked Template + client JS compiler.

align

start

center

end

side

top

bottom

#Installation

bunx --bun barefoot add hover-card

#Usage

@barefootjs

JSX to Marked Template + client JS compiler. Signal-based reactivity for any backend.

Joined December 2024

1import {2  HoverCard,3  HoverCardTrigger,4  HoverCardContent,5} from '@/components/ui/hover-card'

#Examples

#Basic

Hover me

HoverCard

A hover card displays rich content when hovering over a trigger element. It stays open while the mouse is over the trigger or the content.

1"use client"23import { createSignal } from '@barefootjs/dom'4import {5  HoverCard,6  HoverCardTrigger,7  HoverCardContent,8} from '@/components/ui/hover-card'910function BasicHoverCard() {11  const [open, setOpen] = createSignal(false)1213  return (14    <HoverCard open={open()} onOpenChange={setOpen}>15      <HoverCardTrigger>16        <span className="inline-flex items-center rounded-md border px-4 py-2 text-sm">17          Hover me18        </span>19      </HoverCardTrigger>20      <HoverCardContent>21        <div className="space-y-2">22          <h4 className="text-sm font-semibold">HoverCard</h4>23          <p className="text-sm text-muted-foreground">24            Rich content displayed on hover.25          </p>26        </div>27      </HoverCardContent>28    </HoverCard>29  )30}

#API Reference

HoverCard

Prop	Type	Default	Description
open	boolean	false	Whether the hover card is open.
onOpenChange	(open: boolean) => void	-	Callback when open state should change.
openDelay	number	700	Delay in ms before opening on hover.
closeDelay	number	300	Delay in ms before closing after mouse leave.

HoverCardTrigger

Prop	Type	Default	Description
asChild	boolean	false	Render child element as trigger instead of built-in span.

HoverCardContent

Prop	Type	Default	Description
align	'start' \| 'center' \| 'end'	'center'	Alignment relative to the trigger element.
side	'top' \| 'bottom'	'bottom'	Which side of the trigger to position the hover card.