Tooltip

Display brief additional information when hover or focus an element

Code


                                                        
                                                        
                                                            <PyxisTooltip tooltip-id="tooltip-id" direction="center-right">
                                                             <button>Hover me !</button>
                                                             <template v-slot:content>
                                                                 Tooltip content here
                                                             </template>
                                                        </PyxisTooltip>

Example of a regular Tooltip component

Props

The Tooltip component supports the following Props:

Name	Type	Default	Required
direction	top-left\|top-center\|top-right\|center-left\|center-right\|bottom-left\|bottom-center\|bottom-right	top-center	true
tooltipId	string	undefined	true
autoDirection	boolean	true	false
disabled	boolean	false	false
ariaLabel	string	undefined	false
dataTestid	string	undefined	false
spacing	number	4	false

Slots

The Tooltip component offers the following slots for managing its template content:

v-slot:default : This slot is used to define the element that triggers the display of the content when hovered over.

v-slot:content : This slot is used to render the content of the Tooltip.