Was macht die Komponente?

Ein Popover ist ein kleines Overlay, das zusätzlichen Kontext oder interaktive Inhalte anzeigt, wenn Nutzende auf ein Element klicken oder es fokussieren.

Wann soll die Komponente eingesetzt werden?

• Um zusätzliche Informationen oder Aktionen anzuzeigen, ohne die aktuelle Seite zu verlassen.
• Wenn Nutzende eine detaillierte Erklärung oder erweiterte Optionen zu einem bestimmten Element benötigen.
• Um kontextabhängige Inhalte übersichtlich und platzsparend darzustellen.

Regeln

• Achte darauf, dass die Inhalte des Popover auf verschiedenen Geräten und Bildschirmgrößen gut funktioniert und bedienbar ist.
• Achte darauf, dass der Popover nicht zu viele Informationen oder Elemente enthält, um die Übersichtlichkeit zu gewährleisten
• Vermeide es, mehrere Popovers gleichzeitig offen zu halten.

Spielwiese

The sbb-popover component can be useful for displaying contextual and additional information on mouse hover or click of a trigger element.

The component could be used:

• to describe icons and buttons;
• when more information is useful to help a user make decisions;
• when an element needs more context or explanation;
• when defining a term or inline item.

The component must be connected with the trigger element using the trigger property,
which accepts the id of the element, or directly its reference;
the sbb-menu-button is meant to be used as trigger.

<sbb-mini-button icon-name="circle-information-small" id="popover-trigger"></sbb-mini-button>

<sbb-popover id="popover" trigger="popover-trigger">
  <sbb-title level="2" visual-level="6" style="margin-block-start: 0">Popover Title.</sbb-title>
  <p id="popover-content">Popover content.</p>
</sbb-popover>

Configuration

The open and close delays can be configured via global configuration. This values will be used as default, unless explicitly set on the element.

import { mergeConfig } from '@sbb-esta/lyne-elements/core/config.js';

mergeConfig({
  popover: {
    openDelay: 0, // ms before the popover opens
    closeDelay: 0, // ms before the popover closes
  },
});

Interactions

The sbb-popover can be dismissed by clicking on an interactive element within its content,
by clicking on the close button or by performing another action on the page.

You can also indicate that an element within the popover content should close the sbb-popover when clicked
by marking it with the sbb-popover-close attribute;
it's also possible to hide the default close button using the hideCloseButton property.

<sbb-mini-button id="popover-trigger"></sbb-mini-button>

<sbb-popover id="popover" trigger="popover-trigger" hide-close-button>
  <sbb-title level="2" visual-level="6" style="margin-block-start: 0">Popover Title.</sbb-title>
  <p id="popover-content">
    Popover content. <sbb-link id="popover-link" sbb-popover-close>Link</sbb-link>
  </p>
</sbb-popover>

You can also indicate that the sbb-popover should be shown on hover with the property hoverTrigger
and set a custom delay for the open and close animations (defaults to 0).
In this case, the default close button is hidden.

If hover is not supported by the current device, the component will be triggered on click/tap as default.
The sbb-popover will automatically disappear after the hiding delay
if neither the trigger element nor the popover are on hover or if another action is performed on the page.

<sbb-mini-button id="popover-trigger"></sbb-mini-button>

<sbb-popover
  id="popover"
  trigger="popover-trigger"
  hover-trigger
  open-delay="500"
  close-delay="750"
>
  <sbb-title level="2" visual-level="6" style="margin-block-start: 0">Popover Title.</sbb-title>
  <p id="popover-content">Popover content. <sbb-link id="popover-link">Link</sbb-link></p>
</sbb-popover>

Style

The sbb-popover automatically calculates where it should place itself, based on available space. Default is below and center.

Accessibility

As the popover opens, the focus will automatically be set to the first focusable item within the component.
If the close button is not hidden, it's the first element and therefore gets focused (unless manually specified, see below).

Overlays should always contain a heading level 2 title. It can be visually hidden if necessary.

Controlling initial focus

The first element with the attribute sbb-focus-initial will receive focus on opening.
If the attribute is not used, the first focusable element receives focus (recommended).

<sbb-popover>
  <sbb-link href="#">Link</sbb-link>
  <sbb-link sbb-focus-initial href="#">Link 2</sbb-link>
</sbb-popover>

Properties

Methods

Events

CSS Properties

Slots