FEAT: Tooltip component

[Arnimag]

User Story

In order to provide additional context or information without cluttering the UI
As a customer or content manager
I want to see an accessible tooltip that appears on hover or focus and is correctly associated with its trigger for assistive technologies.

Acceptance Criteria

• Visibility Logic: Tooltip becomes visible when the trigger is hovered with a mouse or receives keyboard focus.
• Dismissal: Tooltip correctly hides when the mouse leaves the trigger area or when the element loses focus (blur).
• Accessibility: The trigger element uses aria-describedby to point to the tooltip content ID.
• Role Assignment: The tooltip container uses role="tooltip" to ensure screen readers announce the supplemental information.
• Placement & Positioning: The tooltip does not obscure the trigger. it must remain within the viewport and reposition itself if necessary.
• Interaction: The tooltip is non-blocking, ensuring the trigger can still be clicked or activated while the tooltip is visible.
• Looks and works consistent across all supported browsers and devices.
• Can be viewed and manipulable in Storybook.

Background & Resources

https://demo.shopin.dev/storybook/?path=/story/ui-tooltip--default