GLUON / DOCS Playground

@gluonjs/quarks

@gluonjs/quarks / packages/quarks/src / HoverCard

Function: HoverCard()

HoverCard(props): TemplateResult

Parameters

props

HoverCardProps

Returns

TemplateResult

Example

Attach labelled interactive detail content while retaining focus on the trigger until intentional keyboard or pointer entry:

ts
import {
  HoverCard,
  Tooltip,
  q,
  type AnchoredOverlayContentAttributes,
  type AnchoredOverlayHostAttributes,
  type AnchoredOverlayTriggerAttributes,
  type HoverCardProps,
  type OverlayPlacement,
  type TooltipProps,
} from '@gluonjs/quarks';

const trigger = (attributes: AnchoredOverlayTriggerAttributes) => q.button({ ...attributes, type: 'button', children: 'Delivery details' });
const hostAttributes = { class: 'delivery-help' } satisfies AnchoredOverlayHostAttributes;
const contentAttributes = { class: 'delivery-tooltip' } satisfies AnchoredOverlayContentAttributes;
const placement: OverlayPlacement = 'block-end';
const tooltip = { id: 'delivery-help', trigger, content: 'Timing is confirmed for the configured item.', placement, delay: 300, hostAttributes, contentAttributes } satisfies TooltipProps;
const hoverCard = { id: 'maker-details', label: 'Maker details', trigger, content: q.a({ href: '/makers/ada', children: 'Read the maker profile' }), placement: 'inline-end' } satisfies HoverCardProps;
console.log(Tooltip(tooltip), HoverCard(hoverCard));