story(tooltip): initial implementation

[dauriamarco]

Feature Description

Figma: https://www.figma.com/file/9r6xSfNmEfCFxl1yFYedrj/Lyne-Components?type=design&node-id=32019-475821&mode=design&t=7bsbFumhX1xYIKOm-0

We would like to introduce the sbb-tooltip component. It will be similar to the current sbb-popover but only text will be allowed.

Design Spec

• A tooltip can contain exclusively text. (But no technical restriction)
• Has a max-width same as the toast.
• Is anchored to the trigger position. Either above or below (default). If there is not enough space on left or right, it is moved accordingly to the other side as much as needed.
• Has normal and negative variant (@mcilurzo will design negative variant, might include light box shadow).
• @mcilurzo tooltip trigger is obsolete. Should it be removed in Figma or adapted to something else?

Technical Spec

• The tooltip is shown when hovering over the trigger or on mobile when longpress on the trigger. Click has no effect.
• Furthermore, if the tooltip trigger receives focus (depends on the trigger element type), the tooltip will be shown, while if the trigger loses focus, the tooltip will be dismissed.
• @property() public trigger?: string | HTMLElement: the element that will trigger the popover overlay. Accepts both a string (id of an element) or an HTML element.
  • The tooltip should self assign an id and add the aria-describedby attribute to the trigger pointing to itself.
• @property() public openDelay? = 0: opens the popover after a certain delay.
• @property() public closeDelay? = 0: closes the popover after a certain delay. (@mcilurzo Should this be 1.5s per default from a usability perspective?)
• @property() public touchendCloseDelay? = 1500: closes the popover after a certain delay when triggered via longpress.
• Pressing Esc or interacting with other interactive elements on the page will dismiss the tooltip, if closeDelay is not expired yet.

Accessibility

To pass WCAG 2.1 success criterion 1.4.13:

• It won't close when the user hovers over the tooltip before the closeDelay is expired.
• A tooltip is displayed upon tapping and holding a screen element or component (on mobile) or hovering over it (desktop). Continuously display the tooltip as long as the user long-presses or hovers over the element.
• A tooltip content must be:
  • Disimissable: it can be closed by pressing Esc key.
  • Hoverable: "if pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing".
  • Persistent: "the additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid."

Examples

<button id="trigger-id">Info</button>

<sbb-tooltip trigger="trigger-id">
    I am a tooltip. Only text is allowed!
</sbb-tooltip>

<sbb-icon name="question-mark" id="trigger-id"></button>

<sbb-tooltip trigger="trigger-id">
    I am a tooltip. Only text is allowed!
</sbb-tooltip>

Definition of Done

• Component is implemented
• Documentation is provided
• Tests are implemented
• E2E Tests are implemented
• Storybook stories are implemented
• Navigation via keyboard is tested
• Screen reader output is tested
• High-contrast is tested
• Remaining accessibility is tested
• UX approved