The direction in which the tooltip should appear. Includes top, right, bottom, left, corner placements, and start/end aligned placements. left-start and right-start align the tooltip top with the trigger top; left-end and right-end align their bottom edges.
resize:boolean— optional
default:true
Whether the tooltip should adjust its position to stay within the viewport.
openDelay:number— optional
default:200
The delay in milliseconds before the tooltip appears when hovering over the trigger.
closeDelay:number— optional
default:100
The delay in milliseconds before the tooltip disappears when hovering over the trigger.
gap:number— optional
default:8
The gap in pixels between the tooltip and the trigger.
followCursor:boolean— optional
default:false
Whether the tooltip should follow the cursor position.
disabled:boolean— optional
default:false
Whether the tooltip should be disabled.
allowContentHover:boolean— optional
default:false
Whether the tooltip stays open while the content is hovered over.
tooltipClass:string— optional
default:undefined
Custom CSS class to apply to the tooltip content container.
Slots
The tooltip component provides the following slots for customization.
#trigger
The element that triggers the tooltip on hover. This is typically a button or any interactive element.
#content
The content displayed inside the tooltip popup.
CSS Variables
The tooltip component can be customized using the following CSS variables.