You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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
<buttonid="trigger-id">Info</button><sbb-tooltiptrigger="trigger-id">
I am a tooltip. Only text is allowed!
</sbb-tooltip>
<sbb-iconname="question-mark" id="trigger-id"></button><sbb-tooltiptrigger="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
The text was updated successfully, but these errors were encountered:
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 currentsbb-popover
but only text will be allowed.Design Spec
Technical Spec
@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.@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.Esc
or interacting with other interactive elements on the page will dismiss the tooltip, ifcloseDelay
is not expired yet.Accessibility
To pass WCAG 2.1 success criterion 1.4.13:
closeDelay
is expired.Esc
key.Examples
Definition of Done
The text was updated successfully, but these errors were encountered: