Tooltip

A tooltip names or clarifies the thing it points at. It appears on hover and on focus, and it is never the only place something is said — a reader on a touch screen may never see it at all.

import { Tooltip, TooltipContent, TooltipTrigger } from "ropav";

Placement

TooltipContent takes the placement. It flips to the opposite side when there is not room, so these four are a preference rather than an instruction.

tooltip-placements.vue

<script setup lang="ts">
import { Button, Tooltip, TooltipArrow, TooltipContent } from "ropav";

const placements = ["top", "right", "bottom", "left"] as const;
</script>

<template>
  <Tooltip v-for="placement in placements" :key="placement" :delay="0">
    <Button variant="secondary">{{ placement }}</Button>
    <TooltipContent :placement>
      <TooltipArrow />
      Placed {{ placement }}
    </TooltipContent>
  </Tooltip>
</template>

TooltipArrow is optional and points back at the trigger from whichever side the tooltip ended up on.

Delay

delay is how long a pointer has to rest before the tooltip opens, and close-delay is how long it stays after the pointer leaves. The delay is what stops a row of icon buttons flashing tooltips as the pointer crosses them; set it to 0 only for a single control that is being demonstrated.

What not to put in one

• Nothing interactive. A tooltip closes when the pointer leaves the trigger, so a link or button inside it cannot reliably be reached. Use a Dropdown or a Modal.
• Nothing essential. If the reader has to know it to proceed, it belongs on the page.
• Not a name that is already there. A tooltip repeating a visible label adds noise for someone using a screen reader, who hears both.

Accessibility

• A trigger with no visible text still needs an aria-label. The tooltip describes the control; it does not name it.
• Focusing the trigger opens the tooltip, so a keyboard reader gets what a pointer reader gets.
• Esc closes it without moving focus.

API

Tooltip

Prop	Type	Default	Description
closeDelay	number	the `--rp-tooltip-close-delay` custom property, or 500	How long the tooltip stays after the pointer leaves.
defaultOpen	boolean	—
delay	number	the `--rp-tooltip-delay` custom property, or 1500	How long the pointer has to rest on the trigger before the tooltip opens.
isDisabled	boolean	—
isOpen	boolean	—
shouldCloseOnPress	boolean	true	Whether pressing the trigger closes the tooltip.
shouldSkipAnimation	boolean	false	Whether a tooltip replacing another one appears without an animation. Off by default, which is a deliberate difference from React Aria: it skips both animations while its shared warmup timer is running, whereas here the fade is driven from the stylesheet and is what makes a swap read as one label moving rather than two flashing.
trigger	"focus" | "hover"	"hover"	Opens on hover and on keyboard focus, or on focus alone.

Slots: default.

Event	Payload
openChange	boolean
update:isOpen	boolean

TooltipArrow

Slots: default.

TooltipContent

Prop	Type	Default	Description
arrowBoundaryOffset	number	0	Distance kept between the arrow and the corner of the tooltip.
containerPadding	number	12	Distance kept between the tooltip and the edge of the viewport.
crossOffset	number	0	Distance along the cross axis.
isEntering	boolean	—	Forces the entry state, for a caller driving the animation itself.
isExiting	boolean	—	Forces the exit state.
offset	number	7 with an arrow, 3 without	Distance along the main axis, between the tooltip and its trigger.
placement	"bottom" | "bottom end" | "bottom left" | "bottom right" | "bottom start" | "end" | "end bottom" | "end top" | "left" | "left bottom" | "left top" | "right" | "right bottom" | "right top" | "start" | "start bottom" | "start top" | "top" | "top end" | "top left" | "top right" | "top start"	"top"	Where the tooltip sits relative to its trigger.
portalContainer	string | HTMLElement	document.body	Where the tooltip is rendered.
shouldFlip	boolean	true	Whether the tooltip may flip to the other side when it does not fit.
showArrow	boolean	false	Whether the tooltip leaves room for an arrow. Only the offset: the arrow itself is rendered by TooltipArrow, so setting this without one simply spaces the tooltip further from its trigger.

Slots: default.

TooltipTrigger

Slots: default.