Tooltip should hide when dialog is closed.

packages/components/tooltip/src/tooltip.stories.ts

@@ -1,5 +1,6 @@
 import '@sl-design-system/button/register.js';
 import '@sl-design-system/button-bar/register.js';
+import '@sl-design-system/dialog/register.js';
 import '@sl-design-system/spinner/register.js';
 import { type Meta, type StoryObj } from '@storybook/web-components';
 import { type TemplateResult, html } from 'lit';
@@ -134,3 +135,32 @@ export const All: Story = {
     `;
   }
 };
+
+export const Dialog: Story = {
+  render: () => {
+    const onClick = async (event: Event & { target: HTMLElement }) => {
+      const dialog = document.createElement('sl-dialog');
+      dialog.innerHTML = `
+        <span slot="title">Tooltip</span>
+        Tooltip should be closed when the dialog is closed..
+        <sl-button slot="primary-actions" sl-dialog-close variant="primary">Close</sl-button>
+      `;
+      dialog.addEventListener('sl-close', () => dialog.remove());
+      event.target.insertAdjacentElement('afterend', dialog);
+      await dialog.updateComplete;
+      dialog.showModal();
+    };
+
+    return html`
+      <style>
+        #root-inner {
+          display: grid;
+          height: calc(20rem);
+          place-items: center;
+        }
+      </style>
+      <sl-button aria-describedby="tooltip" @click=${onClick}> Button </sl-button>
+      <sl-tooltip id="tooltip" position="top" max-width="300">This is the tooltip message</sl-tooltip>
+    `;
+  }
+};

packages/components/tooltip/src/tooltip.ts

@@ -121,12 +121,18 @@ export class Tooltip extends LitElement {
   #onHide = (event: Event): void => {
     let toTooltip = false;
     let fromTooltip = false;
+    let fromDialog = false;
+
     if (event instanceof PointerEvent) {
       toTooltip = (event.relatedTarget as Element)?.nodeName === 'SL-TOOLTIP';
+
+      fromDialog =
+        (event.target as Element)?.nodeName === 'SL-DIALOG' || (event.target as Element)?.nodeName === 'SL-BUTTON';
       fromTooltip =
         (event.target as Element)?.nodeName === 'SL-TOOLTIP' && !this.#matchesAnchor(event.relatedTarget as Element);
     }
-    if ((this.#matchesAnchor(event.target as Element) && !toTooltip) || fromTooltip) {
+
+    if ((this.#matchesAnchor(event.target as Element) && !toTooltip) || fromTooltip || fromDialog) {
       this.hidePopover();
     }
   };