The sbb-tooltip-trigger component is used to trigger a tooltip by pressing a button.
By default, it renders the sbb-icon information-circle-small; with the property icon-name it is possible to define a custom icon.
Moreover, it is possible to override the sbb-icon with custom content by slotting it.

Usage

The examples below shows how to use the component with the <sbb-icon> and custom content.

Tooltip trigger with sbb-icon

 <sbb-tooltip-trigger id="tooltip-trigger"></sbb-tooltip-trigger>

<sbb-tooltip trigger="tooltip-trigger">
  <p>
    Tooltip content. 
  </p>
</sbb-tooltip>

Tooltip trigger with custom content

<sbb-tooltip-trigger id="tooltip-trigger2">
  Custom Content
</sbb-tooltip-trigger>

<sbb-tooltip trigger="tooltip-trigger2">
  <p>
    Tooltip content. 
  </p>
</sbb-tooltip>

Accessibility

In order to make screen readers announce the type of the trigger when is focused, use the aria-label attribute, as shown below:

<sbb-tooltip-trigger aria-label="Custom label" id="tooltip-trigger">
</sbb-tooltip-trigger>

To make screen readers announce the tooltip content when the trigger is focused,
associate the tooltip trigger with the tooltip via aria-describedby and an id.

<sbb-tooltip-trigger aria-describedby="tooltip-content" id="tooltip-trigger"></sbb-tooltip-trigger>

<!-- Tooltip component -->
<sbb-tooltip id="tooltip" trigger="tooltip-trigger">
    <p id="tooltip-content">
      Tooltip content. <sbb-link id="tooltip-link" variant="inline">Link</sbb-link>
    </p>
</sbb-tooltip>

Properties

Slots

Dependencies

Used by

• sbb-datepicker-toggle

Depends on

• sbb-icon

Graph

graph TD;
  sbb-tooltip-trigger --> sbb-icon
  sbb-datepicker-toggle --> sbb-tooltip-trigger
  style sbb-tooltip-trigger fill:#f9f,stroke:#333,stroke-width:4px