# Tooltip Component of the SBB design system Lyne. - Package: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`) - Structure: one element - Categories: Container - Status: Design guidelines complete ## Links - Page on digital.sbb.ch: https://digital.sbb.ch/en/design-system/lyne/components/tooltip/ - Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-tooltip--docs - Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/tooltip/overview (API: https://lyne-angular.app.sbb.ch/angular/components/tooltip/api) - Figma: https://www.figma.com/design/mWknI2rC5DJmOgRO61WKai/Lyne-Components?node-id=7491-66 - GitHub: https://github.com/sbb-design-systems/lyne-components/tree/v5.12.0/src/elements/tooltip ## Elements - `sbb-tooltip`: It displays text content within a tooltip. ## Related components - Similar: [Popover](https://digital.sbb.ch/en/design-system/lyne/components/popover/index.md) ## Overview ### What does the component do? The tooltip displays additional information about an element without interrupting the flow. ### When should the component be used? * To explain icons, abbreviations or technical terms. * For supplementary notes on controls. ### Rules. * The text is short, precise and understandable. * Use text only. No interactive elements such as buttons or links. * Essential content and mandatory information do not belong in a tooltip. * The tooltip opens on hover, and on touch devices by long press. Keyboard users must also be able to access the information. ## Implementation (web components) The `` component displays contextual information related to an element. The standard way to use it is through the `trigger` property, referencing the element which activate the tooltip. ```html Button Tooltip message ``` ### Attribute usage It's also possible to use the component by setting the `sbb-tooltip` attribute on the trigger element. The attribute's value is the tooltip's rendered message (_Note: it does not work if used in a Shadow DOM_). ```html Button ``` If the component is used this way, it's also possible to set the open and close delays using the `sbb-tooltip-open-delay` and the `sbb-tooltip-close-delay` attributes. ```html Button ``` ### Interactions The tooltip opens when the user hovers the trigger element and closes on mouse leave. A delay can be optionally set, both on open and close actions. On touch devices, the tooltip opens on long press and closes automatically after a `longPressCloseDelay` (default: 1500 ms). ### Positioning The tooltip uses the [CSS anchor positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning/Using) to anchor itself to the trigger element. Specifically, it uses the "[position-area](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#setting_a_position-area)" and "[position-try-fallbacks](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning/Try_options_hiding#using_position-area_try_fallback_options)" CSS properties to define where the tooltip should be positioned. You can control the positioning of the tooltip by overriding the `--sbb-overlay-position-area` and `--sbb-overlay-position-try-fallbacks` CSS variables. By default, it appears above the trigger element and, if there is insufficient space, it automatically chooses the best available position. ```scss // Primary position --sbb-overlay-position-area: block-start; // Fallback positions. The first one that fits will be used. --sbb-overlay-position-try-fallbacks: block-start span-inline-end, block-start span-inline-start, block-end, block-end span-inline-end, block-end span-inline-start; ``` > ⓘ The CSS anchor positioning feature is not yet fully [supported](https://caniuse.com/css-anchor-positioning) by all browsers. > > Therefore, a polyfill is used which limits the available positions to the following: > > | Logical positions | Physical positions | > | ------------------------------- | ------------------- | > | `block-start` | `top` | > | `block-end` | `bottom` | > | `inline-start` | `left` | > | `inline-end` | `right` | > | `block-start span-inline-start` | `top span-left` | > | `block-start span-inline-end` | `top span-right` | > | `block-end span-inline-start` | `bottom span-left` | > | `block-end span-inline-end` | `bottom span-right` | > | `inline-start span-block-start` | `left span-top` | > | `inline-start span-block-end` | `left span-bottom` | > | `inline-end span-block-start` | `right span-top` | > | `inline-end span-block-end` | `right span-bottom` | #### Attribute usage When using the `sbb-tooltip` attribute, you can configure the position by setting the `sbb-tooltip-position` attribute. The value of the attribute is a comma-separated list of positions. ```html Button ``` ### Configuration The open and close delays can be configured via global configuration. These values will be used as default, unless explicitly set on the element. ```ts import { mergeConfig } from '@sbb-esta/lyne-elements/core.js'; mergeConfig({ tooltip: { openDelay: 0, // Delay before the tooltip opens (in ms) closeDelay: 0, // Delay before the tooltip closes (in ms) longPressCloseDelay: 1500, // Duration before the tooltip auto-closes after a long press (in ms) }, }); ``` ### Accessibility The `` adds an `ariaDescribedby` reference to an element containing the tooltip's message. Avoid interactions that exclusively show a tooltip with pointer events like click and mouseenter. Always ensure that keyboard users can perform the same set of actions available to mouse and touch users. ## API (web components) Full API tables (attributes, events, slots, CSS properties): https://digital.sbb.ch/en/design-system/lyne/components/tooltip/api.md