fix: display tooltips over notifications (#6074)

* fix: display tooltips over notifications

* set manual mode via attribute

integration/package.json

@@ -28,6 +28,7 @@
     "@vaadin/menu-bar": "24.2.0-alpha1",
     "@vaadin/message-input": "24.2.0-alpha1",
     "@vaadin/multi-select-combo-box": "24.2.0-alpha1",
+    "@vaadin/notification": "24.2.0-alpha1",
     "@vaadin/number-field": "24.2.0-alpha1",
     "@vaadin/overlay": "24.2.0-alpha1",
     "@vaadin/password-field": "24.2.0-alpha1",

integration/tests/notification-tooltip.test.js

@@ -0,0 +1,31 @@
+import { expect } from '@esm-bundle/chai';
+import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
+import '@vaadin/notification';
+import '@vaadin/tooltip';
+
+describe('notification and tooltip', () => {
+  beforeEach(async () => {
+    const wrapper = fixtureSync(`
+      <div>
+        <vaadin-notification></vaadin-notification>
+        <div id="target"></div>
+        <vaadin-tooltip for="target" text="Tooltip" manual></vaadin-tooltip>
+      </div>
+    `);
+    const notification = wrapper.querySelector('vaadin-notification');
+    const tooltip = wrapper.querySelector('vaadin-tooltip');
+    notification.opened = true;
+    tooltip.opened = true;
+    await nextRender();
+  });
+
+  it('should show tooltips above notifications', () => {
+    const notificationContainer = document.querySelector('vaadin-notification-container');
+    const tooltipOverlay = document.querySelector('vaadin-tooltip-overlay');
+
+    const notificationZIndex = parseInt(getComputedStyle(notificationContainer).zIndex);
+    const tooltipZIndex = parseInt(getComputedStyle(tooltipOverlay).zIndex);
+
+    expect(tooltipZIndex).to.be.above(notificationZIndex);
+  });
+});

packages/tooltip/src/vaadin-tooltip-overlay.js

@@ -10,6 +10,10 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 registerStyles(
   'vaadin-tooltip-overlay',
   css`
+    :host {
+      z-index: 1100;
+    }
+
     [part='overlay'] {
       max-width: 40ch;
     }