feat(buttons): add tooltip support to selection buttons

playwright/e2e/element-examples/selection-buttons.spec.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+import { expect, test } from '../../support/test-helpers';
+
+test.describe('selection-buttons tooltip', () => {
+  const example = 'buttons/selection-buttons';
+
+  test('icon-only with tooltip on focus', async ({ page, si }) => {
+    await si.visitExample(example);
+
+    const fullScreenButton = page.getByRole('radio', { name: 'Full-screen' });
+    await fullScreenButton.focus();
+
+    await expect(page.locator('si-tooltip')).toBeVisible();
+    await expect(page.locator('si-tooltip')).toContainText('Full-screen');
+
+    await si.runVisualAndA11yTests('selection-button-icon-tooltip-focus');
+  });
+
+  test('icon-only with tooltip on hover', async ({ page, si }) => {
+    await si.visitExample(example);
+
+    const sidebarButton = page.getByRole('radio', { name: 'Sidebar' });
+    await sidebarButton.hover();
+
+    await expect(page.locator('si-tooltip')).toBeVisible();
+    await expect(page.locator('si-tooltip')).toContainText('Sidebar');
+
+    await si.runVisualAndA11yTests('selection-button-icon-tooltip-hover');
+  });
+});

playwright/snapshots/selection-buttons.spec.ts-snapshots/buttons--selection-buttons--selection-button-icon-tooltip-focus.yaml

@@ -0,0 +1,50 @@
+- heading "Single-select" [level=4]
+- group "Basic radio toggle button group":
+  - radio "Day" [checked]
+  - text: ""
+  - radio "Week"
+  - text: ""
+  - radio "Month"
+  - text: ""
+- group "Radio toggle button group with icon":
+  - radio "Comfort" [checked]
+  - text: ""
+  - radio "Pre-comfort"
+  - text: ""
+  - radio "Economy"
+  - text: ""
+- group "Layout selection toggle":
+  - radio "Full-screen" [checked]
+  - radio "Sidebar"
+  - radio "Footer"
+- heading "Sizing" [level=4]
+- group "Basic radio toggle button group":
+  - radio "Large" [checked]
+  - text: ""
+  - radio "Group"
+  - text: ""
+  - radio "Size"
+  - text: ""
+- group "Basic radio toggle button group":
+  - radio "Default" [checked]
+  - text: ""
+  - radio "Group"
+  - text: ""
+  - radio "Size"
+  - text: ""
+- group "Basic radio toggle button group":
+  - radio "Small" [checked]
+  - text: ""
+  - radio "Group"
+  - text: ""
+  - radio "Size"
+  - text: ""
+- heading "Multi-select" [level=4]
+- group "Basic checkbox toggle button group":
+  - checkbox "€"
+  - text: ""
+  - checkbox "€€"
+  - text: ""
+  - checkbox "€€€"
+  - text: ""
+- tooltip "Full-screen"

playwright/snapshots/selection-buttons.spec.ts-snapshots/buttons--selection-buttons--selection-button-icon-tooltip-hover.yaml

@@ -0,0 +1,50 @@
+- heading "Single-select" [level=4]
+- group "Basic radio toggle button group":
+  - radio "Day" [checked]
+  - text: ""
+  - radio "Week"
+  - text: ""
+  - radio "Month"
+  - text: ""
+- group "Radio toggle button group with icon":
+  - radio "Comfort" [checked]
+  - text: ""
+  - radio "Pre-comfort"
+  - text: ""
+  - radio "Economy"
+  - text: ""
+- group "Layout selection toggle":
+  - radio "Full-screen" [checked]
+  - radio "Sidebar"
+  - radio "Footer"
+- heading "Sizing" [level=4]
+- group "Basic radio toggle button group":
+  - radio "Large" [checked]
+  - text: ""
+  - radio "Group"
+  - text: ""
+  - radio "Size"
+  - text: ""
+- group "Basic radio toggle button group":
+  - radio "Default" [checked]
+  - text: ""
+  - radio "Group"
+  - text: ""
+  - radio "Size"
+  - text: ""
+- group "Basic radio toggle button group":
+  - radio "Small" [checked]
+  - text: ""
+  - radio "Group"
+  - text: ""
+  - radio "Size"
+  - text: ""
+- heading "Multi-select" [level=4]
+- group "Basic checkbox toggle button group":
+  - checkbox "€"
+  - text: ""
+  - checkbox "€€"
+  - text: ""
+  - checkbox "€€€"
+  - text: ""
+- tooltip "Sidebar"

playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode-no-backdrop.yaml

@@ -4,7 +4,9 @@
 - button "Hey there" [expanded]
 - region "Hey there": And here we have some content
 - button "Another one"
+- region "Another one"
 - button "Number three"
+- region "Number three"
 - banner:
   - link "Siemens logo":
     - /url: "#/"
@@ -52,5 +54,5 @@
   - text: Displays a semi-transparent overlay that blocks interactions with the main content while keeping it visible for context. Only active in over-mode (or when scroll mode is forced to over-mode on smaller screens). The backdrop can be clicked to close the side panel and can be disabled with the
   - code: disableBackdrop
   - text: input.
-- switch "disableBackdrop" [checked]
-- code: disableBackdrop
+- checkbox "disableBackdrop" [checked]
+- text: disableBackdrop

playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode.yaml

@@ -4,7 +4,9 @@
 - button "Hey there" [expanded]
 - region "Hey there": And here we have some content
 - button "Another one"
+- region "Another one"
 - button "Number three"
+- region "Number three"
 - banner:
   - link "Siemens logo":
     - /url: "#/"
@@ -52,5 +54,5 @@
   - text: Displays a semi-transparent overlay that blocks interactions with the main content while keeping it visible for context. Only active in over-mode (or when scroll mode is forced to over-mode on smaller screens). The backdrop can be clicked to close the side panel and can be disabled with the
   - code: disableBackdrop
   - text: input.
-- switch "disableBackdrop"
-- code: disableBackdrop
+- checkbox "disableBackdrop"
+- text: disableBackdrop

playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--scroll-mode.yaml

@@ -4,7 +4,9 @@
 - button "Hey there" [expanded]
 - region "Hey there": And here we have some content
 - button "Another one"
+- region "Another one"
 - button "Number three"
+- region "Number three"
 - banner:
   - link "Siemens logo":
     - /url: "#/"
@@ -52,5 +54,5 @@
   - text: Displays a semi-transparent overlay that blocks interactions with the main content while keeping it visible for context. Only active in over-mode (or when scroll mode is forced to over-mode on smaller screens). The backdrop can be clicked to close the side panel and can be disabled with the
   - code: disableBackdrop
   - text: input.
-- switch "disableBackdrop"
-- code: disableBackdrop
+- checkbox "disableBackdrop"
+- text: disableBackdrop

playwright/snapshots/static.spec.ts-snapshots/buttons--selection-buttons.yaml

@@ -14,9 +14,9 @@
   - radio "Economy"
   - text: ""
 - group "Layout selection toggle":
-  - radio "One pane" [checked]
-  - radio "Two panes"
-  - radio "Three panes"
+  - radio "Full-screen" [checked]
+  - radio "Sidebar"
+  - radio "Footer"
 - heading "Sizing" [level=4]
 - group "Basic radio toggle button group":
   - radio "Large" [checked]

projects/element-theme/src/styles/bootstrap/_button-group.scss

@@ -95,10 +95,11 @@ $btn-size-sm: 24px !default;
   &[inert] {
     opacity: semantic-tokens.$element-action-disabled-opacity;
   }
-}
 
-.btn-group .btn-check {
-  + .btn {
+  // Selection buttons
+  .btn-check + .btn,
+  label.btn:has(.btn-check) {
+    cursor: pointer;
     background: transparent;
     color: semantic-tokens.$element-text-primary;
     padding-block: calc(variables.$btn-padding-y - 1px);
@@ -123,12 +124,14 @@ $btn-size-sm: 24px !default;
     }
   }
 
-  &:checked + .btn,
-  + .btn:hover {
+  .btn-check:is(:hover, :checked) + .btn,
+  .btn-check + .btn:hover,
+  label.btn:has(.btn-check:is(:hover, :checked)) {
     color: semantic-tokens.$element-ui-0-hover;
   }
 
-  &:checked + .btn {
+  .btn-check:checked + .btn,
+  label.btn:has(.btn-check:checked) {
     background: semantic-tokens.$element-action-secondary-active;
     border-color: semantic-tokens.$element-action-secondary-border-hover;
     z-index: 2;
@@ -138,7 +141,8 @@ $btn-size-sm: 24px !default;
     }
   }
 
-  &:focus-visible + .btn {
+  .btn-check:focus-visible + .btn,
+  label.btn:has(.btn-check:focus-visible) {
     @include focus.make-outline-focus();
     z-index: 3;
   }

projects/element-theme/src/styles/bootstrap/forms/_form-check.scss

@@ -215,6 +215,19 @@ $form-check-label-start: $form-check-size + map.get(spacers.$spacers, 4);
 }
 
 // button group
+.btn-group label:has(.btn-check) {
+  position: relative;
+
+  .btn-check {
+    inset: 0;
+    z-index: 3;
+    cursor: pointer;
+    opacity: 0;
+    clip: auto;
+    pointer-events: all;
+  }
+}
+
 .btn-check {
   position: absolute;
   clip: rect(0, 0, 0, 0);

src/app/examples/buttons/selection-buttons.html

@@ -33,19 +33,38 @@ <h4>Single-select</h4>
 <br /><br />
 
 <div class="btn-group" role="group" aria-label="Layout selection toggle">
-  <input type="radio" class="btn-check" name="btnradio3" id="btnradio3-1" checked />
-  <label class="btn btn-icon" for="btnradio3-1" aria-label="One pane">
-    <i class="icon element-layout-pane-1" aria-hidden="true"></i>
+  <label class="btn btn-icon">
+    <input
+      type="radio"
+      class="btn-check"
+      name="layoutRadio"
+      siTooltip="Full-screen"
+      aria-label="Full-screen"
+      checked
+    />
+    <si-icon icon="element-layout-pane-1" />
   </label>
 
-  <input type="radio" class="btn-check" name="btnradio3" id="btnradio3-2" />
-  <label class="btn btn-icon" for="btnradio3-2" aria-label="Two panes">
-    <i class="icon element-layout-pane-2" aria-hidden="true"></i>
+  <label class="btn btn-icon">
+    <input
+      type="radio"
+      class="btn-check"
+      name="layoutRadio"
+      siTooltip="Sidebar"
+      aria-label="Sidebar"
+    />
+    <si-icon icon="element-layout-pane-2" />
   </label>
 
-  <input type="radio" class="btn-check" name="btnradio3" id="btnradio3-3" />
-  <label class="btn btn-icon" for="btnradio3-3" aria-label="Three panes">
-    <i class="icon element-layout-pane-3" aria-hidden="true"></i>
+  <label class="btn btn-icon">
+    <input
+      type="radio"
+      class="btn-check"
+      name="layoutRadio"
+      siTooltip="Footer"
+      aria-label="Footer"
+    />
+    <si-icon icon="element-layout-pane-3" />
   </label>
 </div>
 <br /><br />

src/app/examples/buttons/selection-buttons.ts

@@ -3,9 +3,12 @@
  * SPDX-License-Identifier: MIT
  */
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { SiIconComponent } from '@siemens/element-ng/icon';
+import { SiTooltipDirective } from '@siemens/element-ng/tooltip';
 
 @Component({
   selector: 'app-sample',
+  imports: [SiIconComponent, SiTooltipDirective],
   templateUrl: './selection-buttons.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'p-5' }