Popout

A flexible popout component that can be used to create tooltips, dropdowns, or any other floating content. It uses the Floating UI library for positioning and provides smooth animations.

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>.

Props

Name	Default	Type
`anchor`	—	`HTMLElement` Reference to the HTML element the Popout is anchored to
`placement`	`top`	`string` Position of the popout relative to the anchor
`offset`	`8`	`number` Distance between the anchor and the popout in pixels
`visible`	—	`boolean` Whether the popout is visible
`transition-name`	—	`string` `none` Allows you to change or disable the Vue transition for the popout appear. By default, placement-based transition is used. Set to `none` when using the View Transitions API to prevent the default animation from conflicting with your view transition.
`teleport`	`true`	`boolean` Whether the popout is teleported to `body`
`enter-delay`	`0`	`number` Delay in milliseconds before the popout becomes visible after `visible` turns true
`leave-delay`	`0`	`number` Delay in milliseconds before the popout hides after `visible` turns false

Events

Name	Payload	Type
`clickOutside`	—	Called when clicking outside the popout

Slots

Name	Accepts	Description
`default`	`any`	The content inside the popout