HoverCard

Rich card revealed when hovering or focusing the trigger text. The size prop (xs, sm, md, lg, xl) sets the card width, padding and text.

Jump to API reference

Import

Vue
import { UiHoverCard } from '@ziyarago/ui/vue'

Default

Hover over Makkah Clock Tower
5-star hotel, 80 m from the Haram gate. Rooms from $180.
Vue
<UiHoverCard trigger="Hover over Makkah Clock Tower">
  5-star hotel, 80 m from the Haram gate. Rooms from $180.
</UiHoverCard>

Sizes

Makkah Clock Tower
5-star hotel, 80 m from the Haram gate.
Makkah Clock Tower
5-star hotel, 80 m from the Haram gate.
Makkah Clock Tower
5-star hotel, 80 m from the Haram gate.
Makkah Clock Tower
5-star hotel, 80 m from the Haram gate.
Makkah Clock Tower
5-star hotel, 80 m from the Haram gate.
Vue
<UiHoverCard size="xs" trigger="Makkah Clock Tower">
  5-star hotel, 80 m from the Haram gate.
</UiHoverCard>

<UiHoverCard size="sm" trigger="Makkah Clock Tower">
  5-star hotel, 80 m from the Haram gate.
</UiHoverCard>

<UiHoverCard size="md" trigger="Makkah Clock Tower">
  5-star hotel, 80 m from the Haram gate.
</UiHoverCard>

<UiHoverCard size="lg" trigger="Makkah Clock Tower">
  5-star hotel, 80 m from the Haram gate.
</UiHoverCard>

<UiHoverCard size="xl" trigger="Makkah Clock Tower">
  5-star hotel, 80 m from the Haram gate.
</UiHoverCard>

API reference

Rich card shown on hover or keyboard focus of a trigger; use for previews of users, links or entities.

Props

PropType and valuesDefaultDescription
triggerstring | VNode—Content that triggers the card.
sizexssmmdlgxl'md'Scale of card width (200 to 400 px) and padding.

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultCard content.

Notes

  • The wrapper is focusable (tabIndex 0), so the card also opens on focus.