refactor(tooltip): only show tooltip on focus if :focus-visible matches

playwright/e2e/element-examples/navbar-vertical.spec.ts

@@ -34,6 +34,32 @@ test.describe('navbar vertical', () => {
     await si.runVisualAndA11yTests('collapsed-flyout');
   });
 
+  test('it should show tooltip only on keyboard interaction', async ({ page, si }) => {
+    await si.visitExample(example);
+    await page.getByLabel('collapse', { exact: true }).click();
+    await expect(page.getByLabel('expand', { exact: true })).toBeVisible();
+    await si.waitForAllAnimationsToComplete();
+    const userManagement = page.getByRole('button', { name: 'User management' });
+    const tooltip = page.getByRole('tooltip', { name: 'User management' });
+    const group = page.getByRole('group', { name: 'User management' });
+
+    // This checks the tooltip is visible when using the keyboard
+    await userManagement.focus();
+    await userManagement.press('Enter');
+    await expect(group.getByRole('link', { name: 'Sub item', exact: true })).toBeFocused();
+    await group.press('Escape');
+    await expect(tooltip).toBeVisible();
+    await expect(userManagement).toBeFocused();
+
+    // This check the tooltip is not visible whe using the mouse
+    await userManagement.click();
+    await group.hover();
+    await expect(tooltip).not.toBeVisible();
+    await page.getByRole('main').click(); // outside click to hide flyout
+    await expect(userManagement).toBeFocused();
+    await expect(tooltip).not.toBeVisible();
+  });
+
   test(example + ' mobile collapsed', async ({ page, si }) => {
     await page.setViewportSize({ width: 570, height: 600 });
     await si.visitExample(example, false);

projects/element-ng/tooltip/si-tooltip.directive.spec.ts

@@ -35,6 +35,7 @@ describe('SiTooltipDirective', () => {
       fixture = TestBed.createComponent(TestHostComponent);
       component = fixture.componentInstance;
       button = fixture.nativeElement.querySelector('button') as HTMLButtonElement;
+      spyOn(button, 'matches').and.returnValue(true);
       fixture.detectChanges();
     });
 
@@ -112,6 +113,7 @@ describe('SiTooltipDirective', () => {
       jasmine.clock().install();
       fixture = TestBed.createComponent(TestHostComponent);
       button = fixture.nativeElement.querySelector('button') as HTMLButtonElement;
+      spyOn(button, 'matches').and.returnValue(true);
       fixture.detectChanges();
     });
 

projects/element-ng/tooltip/si-tooltip.directive.ts

@@ -2,13 +2,15 @@
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
+import { isPlatformBrowser } from '@angular/common';
 import {
   booleanAttribute,
   Directive,
   ElementRef,
   inject,
   input,
   OnDestroy,
+  PLATFORM_ID,
   TemplateRef
 } from '@angular/core';
 import { positions } from '@siemens/element-ng/common';
@@ -21,7 +23,7 @@ import { SiTooltipService, TooltipRef } from './si-tooltip.service';
   providers: [SiTooltipService],
   host: {
     '[attr.aria-describedby]': 'describedBy',
-    '(focus)': 'focusIn()',
+    '(focus)': 'focusIn($event)',
     '(mouseenter)': 'show()',
     '(touchstart)': 'hide()',
     '(focusout)': 'hide()',
@@ -63,6 +65,7 @@ export class SiTooltipDirective implements OnDestroy {
   private showTimeout?: ReturnType<typeof setTimeout>;
   private tooltipService = inject(SiTooltipService);
   private elementRef = inject(ElementRef);
+  private isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
 
   ngOnDestroy(): void {
     this.clearShowTimeout();
@@ -98,8 +101,10 @@ export class SiTooltipDirective implements OnDestroy {
     }, delay);
   }
 
-  protected focusIn(): void {
-    this.showTooltip(true);
+  protected focusIn(event: FocusEvent): void {
+    if (this.isBrowser && (event.target as Element).matches(':focus-visible')) {
+      this.showTooltip(true);
+    }
   }
 
   protected show(): void {