The preferred alignment against the trigger. May change when collisions occur.

An offset in pixels from the start or end alignment options.

By default, screenreaders will announce the content inside the component. If this is not descriptive enough, or you have content that cannot be announced, use aria-label as a more descriptive label.

The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners.

The element or component this component should render as. Can be overwritten by asChild.

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read our Composition guide for more details.

When true, overrides the side and align preferences to prevent collisions with boundary edges.

The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check.

The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.

Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.

Whether to hide the content when the trigger becomes fully occluded.

The type of CSS position property to use.

The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.

The distance in pixels from the trigger.

The sticky behavior on the align axis. partial will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless.

Strategy to update the position of the floating element on every animation frame.