Tooltip

Short hint shown on hover or focus of the wrapped element. The size prop (xs, sm, md, lg, xl) sets the tooltip padding and text.

Jump to API reference

Import

Vue

import { UiTooltip } from '@ziyarago/ui/vue'

Default

Hover me

Vue

<UiTooltip text="Copy booking ID">
  Hover me
</UiTooltip>

Several

Wi-FiShuttle

Vue

<UiTooltip text="Free Wi-Fi">
  Wi-Fi
</UiTooltip>

<UiTooltip text="Shuttle to Haram">
  Shuttle
</UiTooltip>

Sizes

Hover meHover meHover meHover meHover me

Vue

<UiTooltip size="xs" text="Copy booking ID">
  Hover me
</UiTooltip>

<UiTooltip size="sm" text="Copy booking ID">
  Hover me
</UiTooltip>

<UiTooltip size="md" text="Copy booking ID">
  Hover me
</UiTooltip>

<UiTooltip size="lg" text="Copy booking ID">
  Hover me
</UiTooltip>

<UiTooltip size="xl" text="Copy booking ID">
  Hover me
</UiTooltip>

API reference

Short text bubble shown on hover or focus of the wrapped element; use for icon-only controls and hints.

Props

PropType and valuesDefaultDescription

textrequiredstring—Tooltip text.

placementtopbottomleftright'top'Side of the wrapped element where the bubble appears.

sizexssmmdlgxl'md'Scale of bubble padding and font.

Slots

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

defaultThe element the tooltip is attached to.

Notes

Pure CSS bubble; it cannot contain markup. For rich content use HoverCard.