fix(components): post-tooltip doesn't show up when the pointer is on a child element

.changeset/fresh-bikes-rush.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Fixed post-tooltip that doesn't show up when the pointer is on a child element (like an icon).

packages/components/cypress/e2e/tooltip.cy.ts

@@ -49,6 +49,21 @@ describe('tooltips', { baseUrl: null, includeShadowDom: true }, () => {
     });
   });
 
+  describe('with child element', () => {
+    beforeEach(() => {
+      cy.visit('./cypress/fixtures/post-tooltip.test.html');
+      cy.get('#target-child-element').as('target');
+      cy.get('#target-child-element span').as('target-child');
+      cy.get('#tooltip-one').find('div[popover]').as('tooltip');
+    });
+
+    it('should show tooltip on hovered child element', () => {
+      cy.get('@tooltip').should('not.be.visible');
+      cy.get('@target-child').trigger('pointerover');
+      cy.get('.\\:popover-open, :popover-open').should('exist');
+    });
+  });
+
   describe('non-focusable element', () => {
     beforeEach(() => {
       cy.visit('./cypress/fixtures/post-tooltip.test.html');

packages/components/cypress/fixtures/post-tooltip.test.html

@@ -10,7 +10,12 @@
     <button aria-describedby="existing-value" data-tooltip-target="tooltip-one" id="target1">
       toggle
     </button>
-    <button data-tooltip-target="tooltip-one" id="target2">toggle 2</button>
+    <button data-tooltip-target="tooltip-one" id="target2">
+      toggle 2 <span>child element</span>
+    </button>
+    <button data-tooltip-target="tooltip-one" id="target-child-element">
+      toggle with <span>child element</span>
+    </button>
     <post-tooltip id="tooltip-one">
       <p>This is a test</p>
     </post-tooltip>

packages/components/src/components/post-tooltip/post-tooltip.tsx

@@ -15,6 +15,7 @@ import { getAttributeObserver } from '../../utils/attribute-observer';
 let tooltipInstances = 0;
 let hideTooltipTimeout: number = null;
 const tooltipTargetAttribute = 'data-tooltip-target';
+const tooltipTargetAttributeSelector = `[${tooltipTargetAttribute}]`;
 
 /**
  * Global event listener to show tooltips. This is globalized so that triggers that are rendered
@@ -23,12 +24,14 @@ const tooltipTargetAttribute = 'data-tooltip-target';
  * @returns
  */
 const globalInterestHandler = (e: PointerEvent | FocusEvent) => {
-  const target = e.target as HTMLElement;
-  if (!target || !('getAttribute' in target)) return;
-  const tooltipTarget = target.getAttribute(tooltipTargetAttribute);
+  const targetElement = (e.target as HTMLElement).closest(
+    tooltipTargetAttributeSelector,
+  ) as HTMLElement;
+  if (!targetElement || !('getAttribute' in targetElement)) return;
+  const tooltipTarget = targetElement.getAttribute(tooltipTargetAttribute);
   if (!tooltipTarget || tooltipTarget === '') return;
   const tooltip = document.getElementById(tooltipTarget) as HTMLPostTooltipElement;
-  tooltip?.show(target);
+  void tooltip?.show(targetElement);
   if (hideTooltipTimeout) {
     window.clearTimeout(hideTooltipTimeout);
     hideTooltipTimeout = null;
@@ -42,8 +45,11 @@ const globalInterestHandler = (e: PointerEvent | FocusEvent) => {
  * @returns
  */
 const globalInterestLostHandler = (e: PointerEvent | FocusEvent) => {
-  const target = e.target as HTMLElement;
-  const tooltipTarget = target.getAttribute(tooltipTargetAttribute);
+  const targetElement = (e.target as HTMLElement).closest(
+    tooltipTargetAttributeSelector,
+  ) as HTMLElement;
+  if (!targetElement || !('getAttribute' in targetElement)) return;
+  const tooltipTarget = targetElement.getAttribute(tooltipTargetAttribute);
   if (!tooltipTarget || tooltipTarget === '') return;
   const tooltip = document.getElementById(tooltipTarget) as HTMLPostTooltipElement;
   globalHideTooltip(tooltip);