Default tooltip directive uses top as default placement
<dt-button v-dt-tooltip="`Tooltip text`">Hover me</dt-button>
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.
<dt-button v-dt-tooltip:bottom-start="`Tooltip text`">Placeholder Button</dt-button>
It's possible to change any property of the tooltip with object syntax.
<dt-button v-dt-tooltip="{ message: 'Tooltip text', placement: 'bottom-start', delay: false }">Placeholder Button</dt-button>
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.
<dt-button v-dt-tooltip.invert="`Tooltip`">Invert via Modifier</dt-button> <dt-button v-dt-tooltip="{ message: 'Tooltip', contentMode: 'invert' }">Invert via Object</dt-button>
Import the directive from dialtone-vue
import { DtTooltipDirective } from "@dialpad/dialtone-vue";
Install the directive into vue instance
Vue.use(DtTooltipDirective);
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:
<dt-tooltip message="tooltip"> <template #anchor> <dt-button> Hover me </dt-button> </template> </dt-tooltip>
<dt-tooltip message="This is a simple tooltip. The tooltip can be positioned in different directions." :placement="placement" > <template #anchor> <dt-button> {{ placement }} </dt-button> </template> </dt-tooltip>
<dt-button id="external-tooltip-anchor" importance="outlined" > External anchor </dt-button> <dt-tooltip external-anchor="#external-tooltip-anchor" > This is a tooltip with external anchor </dt-tooltip>
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.
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.
<dt-tooltip content-mode="invert|dark|light" message="Tooltip"> <template #anchor> <dt-button> Anchor </dt-button> </template> </dt-tooltip>
Reads out the tooltip content as a supplementary description for its trigger when the trigger is focused. See also wai aria practices 1.1.
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.
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
|
|---|
import { DtTooltip } from '@dialpad/dialtone-vue';
Name
|
Type
|
|---|---|
anchor | Slot for the anchor element |
default | Slot for the content, defaults to message prop |
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'"
|
"'root'"
|
"HTMLElement"
|
""
Sets the element to which the tooltip is going to append to.
'body' appends to the nearest ancestor |
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.
| |
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"
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.
|
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" |
Name
|
Type
|
|---|---|
shown | Boolean Emitted when tooltip is shown or hidden |
update:open | undefined Sync open value |
Class
|
Applies to
|
Description
|
|---|
Tooltip documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope