Components / Tooltip

The Tooltip component displays additional information when hovering over an element. It's commonly used to provide context or explanations for UI elements.

Plese note: components using popout (Tooltip, Dropdown & Popout) cannot be styled using scoped CSS in Vue SFC. However, you can just define a new <style> tag, style the popout inside and keep rest of your CSS scoped in a separate <style scoped>.

Basic Usage

Different Placements

With Delay

With Icon

With Formatted Content

Props

Name	Default	Type
`placement`	`top`	`top` `right` `bottom` `left` `top-start` `top-end` `right-start` `right-end` `bottom-start` `bottom-end` `left-start` `left-end` Position of the dropdown relative to the trigger
`enter-delay`	`0`	`number` The delay in milliseconds before showing the tooltip
`leave-delay`	`0`	`number` The delay in milliseconds before hiding the tooltip after the cursor leaves
`disabled`	`false`	`boolean` Controls whether the tooltip can render

Slots

Name	Accepts	Description
`default`	`any`	The element that triggers the tooltip
`tooltip`	`any`	The content of the tooltip