Hover card
A card of more about a link, shown while the pointer or focus rests on it.
forSlots(HoverIntentSlots)(Recipes.HoverCard({}))
Usage
The function that drew the preview, over the theme module Create a theme writes. The preview passes it the style picked above instead of its default.
export const HoverCardStyle = forSlots(HoverIntentSlots)(Recipes.HoverCard({}))
export const hoverCard = <Message>(
style: NamedStyle<typeof HoverIntentSlots>,
model: UiHoverIntent.Model,
toMessage: (message: UiHoverIntent.Message) => Message,
h: HtmlBuilder<Message>,
): Html =>
h.submodel({
slotId: 'preview-hover-card',
model,
view: UiHoverIntent.view,
viewInputs: {
focusTriggerSelector: '#preview-hover-card-trigger',
toView: HoverIntent.toView([style.mixin], { h }, ({ trigger, panel, isVisible }) =>
h.span(
[],
[
h.button([...trigger, h.Id('preview-hover-card-trigger'), h.Type('button')], ['@ada']),
...(isVisible
? [
h.div(
[
...panel,
h.OnMount(
Anchor.Anchor({
buttonId: 'preview-hover-card-trigger',
anchor: { placement: 'bottom-start', gap: 8, padding: 8, portal: false },
}),
),
],
[
h.p([], ['Ada Lovelace']),
h.p([], ['Wrote the first program. 3 projects, 12 followers.']),
],
),
]
: []),
],
),
),
},
toParentMessage: toMessage,
})