A Hovercard toggles a content overlay when its anchor element is hovered for a minimum amount of time.
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>
<div data-qa="dt-hovercard"> <div class="d-popover d-popover__anchor--opened" data-qa="dt-popover-container"> <div id="DtPopover__anchor21" data-qa="dt-hovercard-anchor"> <button class="base-button__button d-btn d-btn--outlined d-btn--muted" data-qa="dt-button" type="button" aria-expanded="true"> <span data-qa="dt-button-label" class="d-btn__label base-button__label"> Hover over me </span> </button> </div> </div> </div> <div class="tippy-box d-ps-absolute" data-tippy-root="" id="tippy-11" style="z-index: 300; position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(874px, 365px, 0px);" data-popper-placement="bottom-start"> <div id="dt20" role="dialog" data-qa="dt-hovercard__dialog" aria-hidden="false" aria-labelledby="DtPopover__anchor21" aria-modal="true" class="d-popover__dialog" tabindex="-1" style=""> <div data-qa="dt-popover-header-footer" class="d-popover__header d-pl16"> <div data-qa="dt-popover-header-footer-content" class="d-popover__header__content"> <div>Header</div> </div> </div> <div data-qa="dt-hovercard-content" class="d-popover__content d-p16"> <div>Content</div> </div> <div data-qa="dt-popover-header-footer" class="d-popover__footer d-pl16"> <div data-qa="dt-popover-header-footer-content" class="d-popover__footer__content"> <div>Footer</div> </div> </div> </div> </div>
Variants #
Many Hovercards #
Vue API #
Slots
Name
|
Description
|
|---|---|
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
|
Description
|
Default
|
|---|---|---|
appendTo | Sets the element to which the popover is going to append to. 'body' will append to the nearest body (supports shadow DOM). Type: HTML_ELEMENT_TYPE|stringValues: 'body''parent'HTMLElement | 'body' |
contentClass | Additional class name for the content wrapper element. Type: string|array|object | '' |
dialogClass | Additional class name for the dialog element. Type: string|array|object | '' |
enterDelay | The enter delay in milliseconds before the hovercard is shown. Type: number | TOOLTIP_DELAY_MS |
externalAnchorElement | 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. Type: HTML_ELEMENT_TYPE | null |
fallbackPlacements | If the popover does not fit in the direction described by "placement", it will attempt to change its direction to the "fallbackPlacements". Type: array | ['auto'] |
footerClass | Additional class name for the footer content wrapper element. Type: string|array|object | '' |
headerClass | Additional class name for the header content wrapper element. Type: string|array|object | '' |
id | The id of the tooltip Type: string | function() { return getUniqueString(); } |
leaveDelay | The leave delay in milliseconds before the hovercard is hidden. Type: number | TOOLTIP_DELAY_MS |
offset | Displaces the content box from its anchor element by the specified number of pixels. Type: array | [0, 16] |
open | 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 Type: booleanValues: nulltruefalse | null |
padding | Padding size class for the popover content. Type: stringValues: nonesmallmediumlarge | 'large' |
placement | The direction the popover displays relative to the anchor. Type: stringValues: toptop-starttop-endrightright-startright-endleftleft-startleft-endbottombottom-startbottom-endautoauto-startauto-end | 'top-start' |
transition | Fade transition when the content display is toggled. Type: booleanValues: truefalse | false |
Events
Name
|
Description
|
|---|---|
opened | Emitted when hovercard is shown or hidden Type: Boolean | Array |