Preview
The hovercard will appear upon the mouse entering the anchor, with a delay of 300 milliseconds. It will remain open as long as the mouse cursor is over either the open card or the anchor.
<dt-hovercard placement="bottom-start"> <template #anchor> <dt-button kind="muted" importance="outlined"> Hover over me </dt-button> </template> <template #content> <div>Content</div> </template> <template #headerContent> <div>Header</div> </template> <template #footerContent> <div>Footer</div> </template> </dt-hovercard>
Variants #
Many Hovercards #
After opening one hovercard, moving to another skips the entrance delay — a "warm-up" pattern for faster navigation between targets.
Content Mode #
Hovercard content renders outside the DOM tree. Use the contentMode prop to apply color mode (invert, light, dark) to the positioned content. See Positioned Components for details.
<dt-hovercard content-mode="invert">...</dt-hovercard> <dt-hovercard content-mode="dark">...</dt-hovercard> <dt-hovercard content-mode="light">...</dt-hovercard>
Vue API #
import { DtHovercard } from '@dialpad/dialtone-vue';Slots
Name
|
Type
|
|---|---|
anchor | Anchor element that activates the hovercard. Usually a button. |
content | Slot for the content that is displayed in the hovercard. |
footerContent | Slot for the footer content. |
headerContent | Slot for hovercard header content |
Props
Name
|
Default
|
Type
|
|---|---|---|
anchorClass | '' | string|array|object Additional class name for the anchor wrapper element. |
appendTo | 'body' |
"'body'"
|
"'parent'"
|
"HTMLElement"
|
""
Sets the element to which the popover is going to append to.
'body' will append to the nearest body (supports shadow DOM). |
contentClass | '' | string|array|object Additional class name for the content wrapper element. |
contentMode |
"light"
|
"dark"
|
"invert"
Applies a color mode to the positioned content element. | |
dialogClass | '' | string|array|object Additional class name for the dialog element. |
enterDelay | TOOLTIP_DELAY_MS | number The enter delay in milliseconds before the hovercard is shown. |
externalAnchorElement | null | HTML_ELEMENT_TYPE External anchor element reference. Use this instead of the anchor slot 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". |
footerClass | '' | string|array|object Additional class name for the footer content wrapper element. |
headerClass | '' | string|array|object Additional class name for the header content wrapper element. |
id | generated unique ID | string The id of the tooltip |
leaveDelay | TOOLTIP_DELAY_MS | number The leave delay in milliseconds before the hovercard is hidden. |
offset | [0, 16] | array Displaces the content box from its anchor element
by the specified number of pixels. |
open | null |
"null"
|
"true"
|
"false"
Controls whether the hovercard is shown. Leaving this null will have the hovercard trigger on hover by default.
If you set this value, the default trigger behavior will be disabled, and you can control it as you need.
Supports .sync modifier |
padding | 'large' |
"none"
|
"small"
|
"medium"
|
"large"
Padding size class for the popover content. |
placement | 'top-start' |
"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. |
transition | false |
"true"
|
"false"
Fade transition when the content display is toggled. |
Events
Name
|
Type
|
|---|---|
opened | Boolean | Array Emitted when hovercard is shown or hidden |