PineUiPhoenix.Components.HoverCard (Pine UI v0.2.1)

Copy Markdown View Source

A rich preview card revealed on hover.

A port of the Pines hover card. Think of the profile preview that appears when you hover a username.

<.hover_card>
  <:trigger><.link href="#">@ada</.link></:trigger>
  <p class="font-semibold">Ada Lovelace</p>
  <p>Wrote the first algorithm intended for a machine.</p>
</.hover_card>

Summary

Overlays

hover_card(assigns)

Renders a hover card.

Overlays

hover_card(assigns)

Renders a hover card.

Accessibility

A hover card is supplementary by nature — it opens on focus as well as hover so keyboard users can reach it, and closes on Escape. Because it is not reachable on touch devices, never put content here that is not available elsewhere.

Attributes

  • id (:string) - Defaults to nil.

  • position (:string) - Defaults to "bottom". Must be one of "top", "bottom", "left", or "right".

  • width (:string) - Defaults to "w-72".

  • open_delay (:integer) - Milliseconds to hover before opening. Stops the card flashing during casual mousing. Defaults to 400.

  • close_delay (:integer) - Milliseconds before closing after the pointer leaves. The grace period is what lets the user move the pointer from the trigger onto the card without it vanishing en route.

    Defaults to 200.

  • class (:string) - Defaults to nil.

  • panel_class (:string) - Defaults to nil.

  • Global attributes are accepted.

Slots

  • trigger (required)
  • inner_block (required)