Tooltip

Tooltip that shows information on hover.

Basic Usage

Wrap the target element with ATooltip and set the content prop.

<ATooltip content="Top tooltip">
  <ABtn>Top</ABtn>
</ATooltip>
<ATooltip content="Bottom tooltip" placement="bottom">
  <ABtn>Bottom</ABtn>
</ATooltip>
<ATooltip content="Left tooltip" placement="left">
  <ABtn>Left</ABtn>
</ATooltip>
<ATooltip content="Right tooltip" placement="right">
  <ABtn>Right</ABtn>
</ATooltip>

Disabled

Set disabled to disable the tooltip.

<ATooltip content="Won't show" disabled>
  <ABtn>Disabled Tooltip</ABtn>
</ATooltip>

API

Props

Name	Type	Default	Description
content	string	''	Tooltip text
placement	'top' | 'bottom' | 'left' | 'right'	'top'	Display position
delay	number	100	Show/hide delay (ms)
disabled	boolean	false	Disable tooltip

Events

Name	Description
show	Tooltip shown
hide	Tooltip hidden

Slots

Name	Description
default	Target element triggering the tooltip

Interaction

• Delayed show on hover/focus, delayed hide on leave
• Four directional placement with auto-flip
• Arrow pointer pointing to trigger element
• 100ms debounce on enter/leave