HoverCard

Sighted preview of what's behind a link — a floating card on hover.

Rest the pointer on a trigger and a content card floats in on the portal layer. Unlike Tooltip (inverted chrome, a string label), HoverCard is a BgPanel card with arbitrary content and stays open while the pointer is over the card itself. Web composition (HoverCardTrigger/HoverCardContent) is "from the web": Go's Layout(th, gtx, content, trigger) wraps both. RTL layout is not yet supported by the underlying toolkit.

Installation

Use the module import (the default), or own the source: lotusui add vendors the component into your app and lotusui update keeps the copy mergeable — see Registry.

go get github.com/ikaito-com/lotusui

# or vendor the source into your app:
go run github.com/ikaito-com/lotusui/cmd/lotusui add hover-card

Usage

open demo ↗

var tip lotusui.HoverCard
tip.Layout(th, gtx, cardBody,
	lotusui.Button(th, &btn, "Hover", lotusui.ButtonProps{Variant: lotusui.ButtonLink}))

Composition

On the web the family splits into HoverCard / HoverCardTrigger / HoverCardContent. In Go one struct owns the state; Layout takes the card body and the trigger as widgets.

Trigger delays

OpenDelay and CloseDelay control when the card opens and closes. Zero keeps the Radix defaults (700ms open, 300ms close) — long enough not to flicker, short enough that the pointer can travel the gap onto the card.

open demo ↗

tip := lotusui.HoverCard{
	OpenDelay:  100 * time.Millisecond,
	CloseDelay: 200 * time.Millisecond,
}

Positioning

Side floats the card above, below, or beside the trigger; Align defaults to PopoverCenter (shadcn). Use PopoverStart / End to slide it along that side.

open demo ↗

tip := lotusui.HoverCard{
	Side:  lotusui.HoverCardTop,
	Align: lotusui.PopoverStart,
}

Basic

The shadcn profile preview: a link trigger and a card with handle, blurb, and join date.

open demo ↗

tip.Layout(th, gtx,
	lotusui.VStack(th.Space.XS,
		lotusui.LabelBody(th, "@nextjs").Layout,
		lotusui.LabelMeta(th, "The React Framework – created and maintained by @vercel.").Layout,
		lotusui.LabelCaption(th, "Joined December 2021").Layout,
	),
	lotusui.Button(th, &btn, "@nextjs", lotusui.ButtonProps{Variant: lotusui.ButtonLink}),
)

Sides

open demo ↗

tip.Side = lotusui.HoverCardLeft // Top / Bottom / Right

RTL

RTL layout is "from the web" — not yet supported by the underlying toolkit.

Glossary / compact

Multi-site: one HoverCard value may call Layout at many sites in a frame (every occurrence of a jargon term); only the hovered site paints. Compact tips: set Width, OpenDelay, and Side on the struct — defaults stay 320dp / 700ms (do not change library defaults for density). For in-text glossary runs see AnnotatedText. Tooltip is the wrong tool for stay-open glossary panels (inverted string tip, no card hover).

API

Option	Type	Description
`Layout(th, gtx, content, trigger)`	`method`	Wrap any trigger; content is the card body. Opens after OpenDelay; stays up while the pointer is over trigger or card.
`Side`	`HoverCardSide`	HoverCardBottom (default), HoverCardTop, HoverCardLeft, HoverCardRight.
`Align`	`PopoverAlign`	PopoverCenter (default, shadcn), PopoverStart, PopoverEnd along the side.
`OpenDelay / CloseDelay`	`time.Duration`	Zero uses 700ms / 300ms (Radix defaults).
`Width`	`unit.Dp`	Card width; zero means 320dp (shadcn w-80).
`Disabled`	`bool`	Prevents opening (chakra).