Tooltip

STooltip is a tooltip built on Reka UI: it shows on hover/focus, renders in a portal, supports the keyboard and placement sides. The trigger goes into the #trigger slot, the content into the default slot or the content prop. On touch devices the tooltip is enabled with the trigger prop — see Opening on press.

Basic usage

Sides

Opening on press

Touch devices have no hover, so by default the tooltip is unavailable there. The trigger prop changes how it opens: auto keeps hover for the mouse and treats a touch as a press; click opens on press on any device. A second press, a press outside, Esc and scrolling close the tooltip. The trigger prop sets how the tooltip opens, the #trigger slot sets the element itself.

The press is not blocked, so the trigger's own action fires as usual. auto-close-delay sets the time in milliseconds after which a tooltip opened by a press hides on its own — useful when the trigger navigates to another screen.

A tooltip must not be the only carrier of important information: its content exists in the markup only while it is open.

Elevation

The tooltip is raised to the second elevation level. flat removes the shadow, elevation changes the level — see Elevation.

<template>
  <STooltip
    content="Copy number"
    flat
  >
    <template #trigger>
      <SButton
        icon="copy"
        aria-label="Copy"
      />
    </template>
  </STooltip>
</template>

API

Props

Name	Type	Default	Description
square	boolean	undefined	Square corners: removes the rounding (rounded by default).
content	string	undefined	Tooltip text (can be replaced with the default slot).
side	| "right" | "left" | "top" | "bottom"	"top"	Side of the trigger the tooltip appears on.
trigger	"hover" | "click" | "auto"	"hover"	How the tooltip opens: hover on hover and focus; click on a trigger press, a second press closes it; auto uses hover for mouse and keyboard and a tap for touch.
delay-duration	number	200	Delay before showing, in ms. Applies only when opening on hover.
auto-close-delay	number	0	After how many ms a tooltip opened by a press closes on its own. 0 keeps it open until another press, a press outside, Escape, or scrolling.
flat	boolean	undefined	Removes the shadow. Overridden by the elevation prop when it is set.
elevation	0 | 1 | 2 | 3 | 4 | 5	undefined	Shadow level 0–5 (scale); 0 means no shadow. Overrides flat.
open	boolean	false	Whether the tooltip is open. Two-way binding via v-model:open.

Events

Name	Signature	Description
update:open	(value: boolean) => void	Emitted when open changes. Used for two-way binding (v-model:open).

Slots

Name	Description
trigger	Trigger element; interacting with it shows the tooltip.
default	Tooltip content (alternative to the content prop).