Restructure ToolTip component

[devmount]

What changed?

Warning

This is a breaking change.

• Restructured ToolTip so its default slot is now the trigger element it wraps, with tooltip content moved to a new named content slot.
• The component now owns its own anchoring, hover/focus-within show/hide, and position-based placement, removing the manual position: relative wrapper consumers used to need.
• Added a visible prop (force show/hide) replacing the old CSS-class hack
• Added a beak prop to toggle the arrow, replacing the removed TooltipPosition.None.
• Added aria-describedby/role="tooltip" wiring via a scoped tooltipId slot prop, replacing the removed alt prop.
• Migrated BaseButton.vue internally to the new ToolTip (its own public props (tooltip, forceTooltip, etc.) are unchanged).

Why?

ToolTip had no concept of the element it annotates, so consumers had to manually wrap trigger and tooltip in a position: relative container and hand-offset the tooltip.

Limitations and Notes

• Breaking change, see the migration guide below.

How to migrate

• Wrap the trigger instead of passing text: <tool-tip> now needs the trigger element as its default slot, with the tooltip text in <template #content>.
• alt prop is removed. Bind aria-describedby on your own trigger via the scoped slot prop tooltipId if you need an accessible description.
• Force-show now uses the visible prop instead of a CSS class hack: true/false forces shown/hidden, unset falls back to hover/focus control.
• TooltipPosition.None is removed. Use :beak="false" instead to hide the arrow.
• position now names the side the tooltip box appears on (e.g. pos-bottom places the tooltip below the trigger), not the arrow's direction as before.
• BaseButton's tooltip/forceTooltip props are removed entirely. Buttons need to be explicitly wrapped in <tool-tip> from now on.

- <div style="position: relative;">
-   <primary-button>Copy the booking link</primary-button>
-   <tool-tip alt="Copies to clipboard" position="pos-bottom">
-     Copies to clipboard
-   </tool-tip>
- </div>
+ <tool-tip position="pos-top">
+   <primary-button>Copy the booking link</primary-button>
+   <template #content>Copies to clipboard</template>
+ </tool-tip>

Applicable Issues

Closes #283

QA Log

• Manually verified all ToolTip stories (Standard, Position, NoBeak, Context) in Storybook: hover and Tab-focus both reveal tooltips, all four positions render on the correct side with matching beak direction, and :beak="false" hides the arrow.
• Ran the full unit test suite, type-check, and lint.
• Let Claude Code review the changes and help with this PR description.

Screenshots

All stories now feature a primary button to trigger the tooltip. The default story:

The position story:

A new "no beak" story:

And renamed "Context" to "Always visible" sotry:

[davinotdavid]

Thanks for the work so far!

I think we could explore the Popover API a bit for this since even though the tooltip is absolute positioned and its size is not counted in the trigger's parent containers, the space is still being counted on the page causing scrollbars / overflow even when closed.

Screen.Recording.2026-09-24.at.4.07.48.PM.mov

[devmount]

@davinotdavid Great feedback, thank you! Feel free to look at it again.

Edit: Oh and I forgot your suggestion of the Popover API - I will investigate this and report back.

[devmount]

@davinotdavid I looked into the Popover API and believe this would be a bigger but non-breaking change (internal use / rewiring to the Popover API with fallback to the current implementation). Therefore I'd like to do this in a separate issue, if that's ok.

Edit: Added #334 for it

[davinotdavid]

Cool, thanks for the revisions! LGTM!