Tooltip

Basic

Use ATooltip component's text prop to show passed text in tooltip.

You can also use default slot to render custom content.

TIP

While rendering custom content, You can use .a-tooltip-text class to add default styles of tooltip text.

Trigger

To open menu on click use set trigger prop to click.

v-model support

ATooltip also support v-model to show/hide tooltip.

Delay

You can delay showing and hiding of tooltip by setting delay (show delay) and hideDelay props.

delay - DX focused prop name

As we regularly configure delay for showing tooltip only and not for hiding, we named prop for delaying tooltip delay instead of showDelay.

Transition

ATooltip also support transition. Default transition is slide-y. Set it to available transition to use different transition. e.g. transition="fade".

To disable the transition you can set transition prop to null.

Placement

As ATooltip uses Floating UI, you can configure how tooltip is rendered.

To adjust the placement of tooltip, use placement prop. This will get directly passed to Floating UI as show in their docs.

✨ Auto Placement

If there's not enough space to render the tooltip on given position then it will update the position according to available space.

Strategy

Set which positioning strategy to use to render the tooltip. This is also Floating UI option, for more details please read the official docs here.

Middleware

ATooltip has some middleware as default to render the tooltip content correctly. You can also customize the middleware you want.

In below demo we are not using any middleware so tooltip component won't behave like above tooltip contents. e.g. Flipping tooltip content if there's not enough space won't work.

middleware prop accepts function that must return array of middleware. Please refer to the code snippet of this demo for function signature.

You can read more about middleware on their official docs.

API

Tooltip

modelValue : boolean

Show/Hide floating element base on v-model value

persist : boolean | "content"

Persistence of floating element when clicked outside of reference element

trigger : "click" | "hover"

delay : number

Delay before showing floating element

hideDelay : number

Delay before hiding floating element

Transition to add while showing/hiding floating element

placement : Placement

strategy : Strategy

Strategy option from Floating UI

middleware : AFloatingMiddlewareFunc

text : string

Text to render in tooltip

Tooltip ​

Basic ​

Trigger ​

v-model support ​

Delay ​

Transition ​

Placement ​

Strategy ​

Middleware ​

API ​