BaseTooltipBox
Component to display a tooltip for additional content e.g.: quick actions
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| attachTo | HTMLElement to attach the tooltip e.g.: vue ref element | null | - | |
| directionOrder | define the default direction order | array | - | ['top', 'bottom', 'right', 'left'] |
| styles | add additional styling caveat: properties top, left and right will be overwritten due position calculation | object | - | {} |
| modalTitle | title of the modal popup on mobile if more customisation is needed, use the slot header-title instead | string | - | '' |
| typeOnMobile | specify how the component is rendered on mobile resolutions box: component is rendered at the attachTo HTMLElementmodal: component is rendered as a modal popup fullscreen: component is rendered as ap popup with max height and width | string | box, fullscreen, modal | 'modal' |
| thresholdTop | specify a threshold value in px for the box top position calculation Useful to prevent top alignment of the TooltipBox, for example, when there is a fixed-positioned header (BaseHeader). Note: The value can also be set globally with the CSS variable --base-tooltip-box-threshold-top.The property will be overwritten by the CSS variable. | number | - | 0 |
| headerId | customise the tooltipBox id if you are using the header-title slot this should also be set as id on your custom title element(it is also available via slot binding) | string|number | - | 'popup-title' |
| descriptionElementId | specify the id of the element containing a description - for accessibility only | string | - | 'popup-body' |
| overlayBackgroundVisible | define if the overlay background should be visible (semitransparent black) - this only applies to typeOnMobile 'modal' | boolean | - | false |
| mobileSize | define a custom size (in px) when the component should switch to mobile view | number | - | 640 |
| initialFocusElement | HTMLElement to focus after opening the tooltip Note: If empty, the header title will be focused by default. If using the slot for a custom header, be sure to define an id attribute with the value headerIdThe value should be a valid CSS selector. | string | - | '' |
| focusableElements | list of focusable HTML elements using tab key navigation | array | - | ['a[href]', 'button:enabled', 'input:enabled', '*[tabindex]:not([tabindex="-1"])'] |
| disableTabKeyHandler | specify to disable the tab key handler within the component | boolean | - | false |
| clickOutsideOptions | specify options for the click-outside handler https://vueuse.org/core/onClickOutside/#type-declarations | object | - | { capture: false } |
Events
| Event name | Properties | Description |
|---|---|---|
| close | undefined boolean - the updated state | Event emitted when close button is clicked or clicked-outside is triggered |
Slots
| Name | Description | Bindings |
|---|---|---|
| header-title | customize the header displayed on mobile for typeOnMobile modal and fullscreen | header-id string, number - bind this id to your slot element containing the title text for assistive technology to work properly |
| default | slot to inject box content |