Tooltip

A Tooltips provides a short description of a page element or control that become visible when the target is hovered over or focussed on.

Usage

import '@vonage/vivid/tooltip';

or, if you need to use a unique prefix:

import { registerTooltip } from '@vonage/vivid';

registerTooltip('your-prefix');

<script setup lang="ts">
	import { VTooltip, VButton } from '@vonage/vivid-vue';
</script>
<template>
	<VTooltip text="I'm a tooltip">
		<VButton
			slot="anchor"
			appearance="filled"
			shape="pill"
			icon="help-line"
			aria-label="More information"
		/>
	</VTooltip>
</template>

Anchor

It's best to use the anchor slot to set the anchor, but you can also use the anchor attribute. Either set it to the id of the anchor element or pass the anchor element itself.

Slots

Anchor Slot

Tooltips need to be anchored to an element. Place the anchor element inside the anchor slot of the tooltip.

Do not use a non-interactive element (div, p, etc.) as an anchor, as the Tooltip will not be accessible to keyboard or screen reader users.

CSS Variables

Max Inline Size

The --tooltip-max-inline-size variable sets the Tooltip's max inline size.

Default: 30ch

API Reference

Properties

Name	Type	Description
anchor	`string` or `HTMLElement`	ID of, or HTML elemnent itself, to anchor the Tooltip to. Prefer using the `anchor` slot
placement	`top`, `top-start`, `top-end`, `bottom`, `bottom-start`, `bottom-end`, `left`, `left-start`, `left-end`, `right`, `right-start`, `right-end`	Prefered placement of the Tooltip in relation to the anchor element
text	`string`	Text content of the Tooltip

Slots

Name	Description
anchor	For the anchor element.