Tooltip API Reference

Props

Prop	Type	Default	Description
content	String	''	The tooltip text content
position	String	'top'	Position of the tooltip relative to trigger element
trigger	String	'hover'	How the tooltip is triggered
showArrow	Boolean	true	Whether to show the arrow indicator
offset	Number	8	Distance between tooltip and trigger element
delay	Number	300	Delay before showing tooltip (ms)
hideDelay	Number	100	Delay before hiding tooltip (ms)
customClass	String	''	Additional CSS classes for the tooltip
disabled	Boolean	false	Whether the tooltip is disabled

Position Options

The position prop accepts the following values:

• 'top' - Above the trigger element
• 'bottom' - Below the trigger element
• 'left' - To the left of the trigger element
• 'right' - To the right of the trigger element
• 'top-left' - Above and aligned to the left
• 'top-right' - Above and aligned to the right
• 'bottom-left' - Below and aligned to the left
• 'bottom-right' - Below and aligned to the right

Trigger Options

The trigger prop accepts the following values:

• 'hover' - Show on mouse enter, hide on mouse leave
• 'click' - Toggle on click, hide on click outside
• 'focus' - Show on focus, hide on blur

Events

Event	Payload	Description
show	-	Emitted when the tooltip becomes visible
hide	-	Emitted when the tooltip becomes hidden
toggle	boolean	Emitted when the tooltip visibility changes

Slots

Slot	Props	Description
default	-	The trigger element that activates the tooltip
tooltip	-	Custom content for the tooltip (overrides content prop)

Methods

The component exposes the following methods via template refs:

Method	Description
show()	Programmatically show the tooltip
hide()	Programmatically hide the tooltip
toggle()	Toggle the tooltip visibility
isVisible	Computed property indicating if tooltip is visible

Dependencies

This component depends on:

• Vue 3 with Composition API
• Vue Teleport for positioning
• Vue Transition for animations