Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
<button class="btn btn-secondary btn-large" data-tooltip-target="tooltip-one">Button</button> <post-tooltip id="tooltip-one" class="hydrated bg-primary" placement="top"> Hi there 👋 </post-tooltip>
| Name | Description | Default | Control |
|---|---|---|---|
| General | |||
| Content | Defines the HTML markup contained in the tooltip. Markup accepted: inline content like <span> or <post-icon>, but no interactive content like <a> or <button>.string | - | |
| Background color | Define a background color, either bg-primary or bg-yellow.HTML class attribute | - | |
| props | |||
| Placement | Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries. "bottom""bottom-end""bottom-start""left""left-end""left-start""right""right-end" | 'top' | |
| Arrow | Wheter or not to display a little pointer arrow boolean | true | |
| methods | |||
| hide | Programmatically hide this tooltip hide() => Promise<void> | - | - |
| show | Programmatically display the tooltip show(target: HTMLElement) => Promise<void> | - | - |
| toggle | Toggle tooltip display toggle(target: HTMLElement, force?: boolean) => Promise<void> | - | - |
The <post-tooltip> element is part of the @swisspost/design-system-components package. For more information, read the
getting started with components guide.
If you assign a tooltip to a non-focusable element, the component will add tabindex="0" automatically. With that, the tooltip is also visible for keyboard users. Also, if you forget to link the tooltip and the trigger with aria-describedby="tooltip-id", we've got you covered.
The same tooltip can be displayed on multiple elements. This reduces the amount of markup necessary.