Renders a trigger and a card that appears after hovering or focusing it.

<.hover_card id="ada-card">
  <:trigger><.link href="/u/ada">@ada</.link></:trigger>
  <.cluster>
    <.avatar name="Ada Lovelace" />
    <div><strong>Ada Lovelace</strong><br />Analytical engines.</div>
  </.cluster>
</.hover_card>

The trigger keeps its own semantics (a link stays a link). The card opens after open_delay ms, stays open while the pointer is over it, and closes close_delay ms after the pointer leaves both. Keyboard users get it on focus, can Tab into it, and dismiss it with Escape. Touch taps activate the trigger as usual instead of opening the card, so put nothing essential in the card.

Attributes

• id (:string) (required)
• placement (:string) - Defaults to "bottom-start". Must be one of "bottom-start", "bottom", "bottom-end", "top-start", "top", or "top-end".
• open_delay (:integer) - ms before opening. Defaults to 400.
• close_delay (:integer) - ms before closing. Defaults to 150.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• trigger (required)
• inner_block (required)