AnuTooltip â
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 â
Show/Hide floating element base on v-model value
Persistence of floating element when clicked outside of reference element
Delay before showing floating element
Delay before hiding floating element
Transition to add while showing/hiding floating element
Strategy option from Floating UI
Text to render in tooltip