docs/extension-test-page
What's New

Tooltip

Figma Storybook GitHub

A tooltip is a floating label that briefly explains an action, function, or an element. Its content is exclusively text and shouldn't be vital information for users. If richer media is desired, consider using a popover instead.

Preview

Tooltip as a Directive

Usage

Default

Default tooltip directive uses top as default placement

With Placement

It's possible to change the tooltip default placement with directive arguments, possible values: bottom, bottom-start, bottom-end, right, right-start, right-end, left, left-start, left-end, top, top-start, top-end.

With Object Syntax

It's possible to change any property of the tooltip with object syntax.

Content Mode

Tooltip content renders outside the DOM tree via Tippy.js. Use the contentMode modifier or object property to apply a color mode to the tooltip content. See Positioned Components for details.

Import

Import the directive from dialtone-vue

import { DtTooltipDirective } from "@dialpad/dialtone-vue";

Install the directive into vue instance

Vue.use(DtTooltipDirective);

Tooltip as a Component

The tooltip, also known as infotip or hint, is a common graphical user interface element in which, when hovering over a screen element or component, a text box displays information about that element (such as a description of a button's function, or what an abbreviation stands for). The tooltip is displayed continuously as long as the user hovers over the element.

When placing DtTooltip on a disabled DtButton, wrap the button in a <span> element — disabled elements do not fire mouse events, so the tooltip anchor must be on the wrapper, not on the disabled button itself.

A tooltip has two slots:

  1. the anchor required slot
  2. the default slot (which could be replaced with prop message)

Base Styles

Placement

External anchor

Fallback Placements

The tooltip uses headless-tippy and popper, if the tooltip opens in a placement where it will be clipped, it will move to a new position. It will do this automatically by default, but if you want to manually specify which position it will move to in what order you can do so via the fallbackPlacements prop.

Content Mode

Tooltip content renders outside the DOM tree via Tippy.js. Use the contentMode prop to apply a color mode to the tooltip content. See Positioned Components for details.

Vue API 

import { DtTooltip } from '@dialpad/dialtone-vue';

Slots

Name
Type
anchor

Slot for the anchor element

default

Slot for the content, defaults to message prop

Props

Name
Default
Type
anchorClass
''
string|object|array

Additional class name for the anchor wrapper element. Can accept all of: String, Object, and Array, i.e. has the same api as Vue's built-in handling of the class attribute.

appendTo
'body'
"'body'" | "'parent'" | "HTMLElement" | ""

Sets the element to which the tooltip is going to append to. 'body' appends to the nearest ancestor

element when inside one (keeping the tooltip in the browser's top layer), or to the nearest body otherwise. To always append to body regardless of dialog context, pass document.body as an HTMLElement. This prop is not reactive, must be set on initial render.

contentClass
''
string|object|array

Additional css classes for the tooltip content element. Can accept all of: String, Object, and Array, i.e. has the same api as Vue's built-in handling of the class attribute.

contentMode
"light" | "dark" | "invert"

Applies a color mode to the positioned content element. light and dark are explicit overrides. invert computes the opposite of the nearest ancestor's mode and stays reactive.

delay
true
"true" | "false"

Whether the tooltip will have a delay when being focused or moused over.

enabled
true
boolean

Controls whether hover/focus causes the tooltip to appear. Cannot be combined with the open prop. open value will be ignored. by default this is true, if you override with false, the tooltip will never show up.

externalAnchorElement
null
HTML_ELEMENT_TYPE

External anchor element reference. Use this instead of externalAnchor when the anchor may be inside a Shadow DOM, as querySelector cannot pierce shadow boundaries.

fallbackPlacements
['auto']
array

If the popover does not fit in the direction described by "placement", it will attempt to change its direction to the "fallbackPlacements" if defined, otherwise it will automatically position to a new location as it sees best fit. See Popper.js docs

id
generated unique ID
string

The id of the tooltip

message
''
string

A provided message for the tooltip content

offset
[0, 12]
array

Displaces the tooltip from its reference element by the specified number of pixels. See Tippy.js docs

open
null
"null" | "true" | "false"

Controls whether the tooltip is shown. Leaving this null will have the tooltip trigger on mouseover by default. If you set this value, the default mouseover behavior will be disabled and you can control it as you need.

placement
'top'
"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end" | "bottom" | "bottom-start" | "bottom-end" | "auto" | "auto-start" | "auto-end"

The direction the popover displays relative to the anchor. See Tippy.js docs

sticky
true
"true" | "false" | "reference" | "popper"

If the tooltip sticks to the anchor. This is usually not needed, but can be needed if the reference element's position is animating, or to automatically update the popover position in those cases the DOM layout changes the reference element's position. true enables it, reference only checks the "reference" rect for changes and popper only checks the "popper" rect for changes. See Tippy.js docs

theme
null
string

Set a custom theme on the tooltip. See https://atomiks.github.io/tippyjs/v6/themes/

transition
true
boolean

Whether the tooltip should have a transition effect (fade).

externalAnchor Deprecated
 null
string

External anchor id to use in those cases the anchor can't be provided via the slot. For instance, using the combobox's input as the anchor for the popover.

Use externalAnchorElement instead for Shadow DOM compatibility.

inverted Deprecated
 false
"true" | "false"

Use contentMode="invert"

Events

Name
Type
shown
Boolean

Emitted when tooltip is shown or hidden

update:open
undefined

Sync open value

Classes

Class
Applies to
Description

Accessibility

Reads out the tooltip content as a supplementary description for its trigger when the trigger is focused. See also wai aria practices 1.1.

Anchor

The anchor element that activates the tooltip should be fully accessible by keyboard. The easiest way to do this is by using an element like an DtButton that is already accessible. When pressing the ESC key in a focused tooltip, tooltip will be closed.

There are some required ARIA attributes for the anchor element (such as aria-hidden set based on open). To make this as straightforward as possible, these ARIA attributes are passed with the correct values as the attrs to the anchor slot. Applying them is as simple as using v-bind.

Focus & Keyboard

Due to the different contexts in which a tooltip can be used, focus management and keyboard shortcut ESC is provided. You are encouraged to consult the ARIA documentation for the particular role.

Item
Applies to
Description

Tooltip documentation last updated Thursday, June 18, 2026