@descope-ui/descope-tooltip 2.2.13 → 2.2.15

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [2.2.15](https://github.com/descope/web-components-ui/compare/web-components-ui-2.2.14...web-components-ui-2.2.15) (2025-12-23)
+
+## [2.2.14](https://github.com/descope/web-components-ui/compare/web-components-ui-2.2.13...web-components-ui-2.2.14) (2025-12-22)
+
 ## [2.2.13](https://github.com/descope/web-components-ui/compare/web-components-ui-2.2.12...web-components-ui-2.2.13) (2025-12-21)
 
 # Changelog

package/e2e/descope-tooltip.spec.ts

@@ -18,6 +18,7 @@ const componentAttributes = {
     'end-bottom',
   ],
   opened: ['true', 'false'],
+  shadow: ['', 'sm', 'md', 'lg', 'xl'],
 };
 
 const storyName = 'descope-tooltip';
@@ -95,4 +96,11 @@ test.describe('logic', () => {
     await page.waitForTimeout(3000);
     expect(await container.screenshot()).toMatchSnapshot();
   });
+
+  test('static-display', async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, { opened: 'true', 'static-display': 'true' }));
+    const container = page.locator('.story-wrapper');
+
+    expect(await container.screenshot()).toMatchSnapshot();
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/descope-tooltip",
-  "version": "2.2.13",
+  "version": "2.2.15",
   "exports": {
     ".": {
       "import": "./src/component/index.js"
@@ -14,13 +14,13 @@
   },
   "devDependencies": {
     "@playwright/test": "1.38.1",
-    "e2e-utils": "2.2.13"
+    "e2e-utils": "2.2.15"
   },
   "dependencies": {
     "@vaadin/tooltip": "24.3.4",
-    "@descope-ui/common": "2.2.13",
-    "@descope-ui/theme-globals": "2.2.13",
-    "@descope-ui/descope-enriched-text": "2.2.13"
+    "@descope-ui/common": "2.2.15",
+    "@descope-ui/theme-globals": "2.2.15",
+    "@descope-ui/descope-enriched-text": "2.2.15"
   },
   "publishConfig": {
     "link-workspace-packages": false

package/src/component/TooltipClass.js

@@ -46,6 +46,24 @@ class RawTooltip extends BaseClass {
     return this.getAttribute('text')?.trim() || '';
   }
 
+  get isStaticDisplay() {
+    return this.getAttribute('static-display') === 'true';
+  }
+
+  // We use `static-display` for presentation purposes, to show the tooltip content.
+  // This should be used only when `opened` is `true`. Once `static-display` is set,
+  // the overlay would become a `static` element, and will have layout in the presenting page.
+  // This is mainly aimed to solve the presentation problem on our Styles Page in the Console.
+  #handleStaticDisplay() {
+    if (this.isStaticDisplay) {
+      this.#revealWrappedParts();
+      this.setAttribute('inert', 'true');
+    } else {
+      this.#hideWrappedParts();
+      this.removeAttribute('inert');
+    }
+  }
+
   init() {
     super.init();
 
@@ -54,15 +72,29 @@ class RawTooltip extends BaseClass {
     this.insertAdjacentHTML('beforeend', '<vaadin-tooltip></vaadin-tooltip>');
     this.tooltip = this.querySelector('vaadin-tooltip');
 
+    this.#hideWrappedParts();
+
+    this.#setTooltipTarget();
+
+    setTimeout(() => this.#onOverlayReady());
+  }
+
+  #hideWrappedParts() {
     this.tooltip.style.width = '0';
     this.tooltip.style.height = '0';
     this.tooltip.style.display = 'block';
     this.tooltip.style.overflow = 'hidden';
     this.tooltip.style.position = 'absolute';
-
-    this.#setTooltipTarget();
-
-    setTimeout(() => this.#onOverlayReady());
+  }
+  
+  #revealWrappedParts() {
+    this.tooltip.style.width = '100%';
+    this.tooltip.style.height = '100%';
+    this.tooltip.style.position = 'static';
+    this.tooltip.style.overflow = 'visible';
+    this.tooltip.textContent = '';
+    this.overlay.style.display = 'block';
+    this.overlay.style.position = 'static';
   }
 
   #onOverlayReady() {
@@ -127,7 +159,10 @@ class RawTooltip extends BaseClass {
       // When `opened` attr is used, vaadin doesn't execute `_attachOverlay`,
       // and the overlay element is rendered outside the component, on the top
       // level. We need to move it back to the local component's DOM.
-      setTimeout(() => this.tooltip.shadowRoot.appendChild(this.overlay));
+      setTimeout(() => {
+        this.tooltip.shadowRoot.appendChild(this.overlay);
+        this.#handleStaticDisplay();
+      });
     } else {
       this.overlay._detachOverlay = () => {};
 

package/src/theme.js

@@ -1,11 +1,22 @@
 import globals from '@descope-ui/theme-globals';
-import { getThemeRefs } from '@descope-ui/common/theme-helpers';
-import { TooltipClass } from './component/TooltipClass';
+import { getThemeRefs, createHelperVars } from '@descope-ui/common/theme-helpers';
+import { TooltipClass, componentName } from './component/TooltipClass';
 
 const globalRefs = getThemeRefs(globals);
 const vars = TooltipClass.cssVarList;
 
+const [helperTheme, helperRefs, helperVars] = createHelperVars(
+  {
+    shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
+  },
+  componentName
+);
+
+const { shadowColor } = helperRefs;
+const defaultShadow = `${globalRefs.shadow.wide.sm} ${shadowColor}, ${globalRefs.shadow.narrow.sm} ${shadowColor}`;
+
 const tooltip = {
+  ...helperTheme,
   [vars.fontFamily]: globalRefs.fonts.font1.family,
   [vars.fontSize]: globals.typography.body2.size,
   [vars.fontWeight]: globals.typography.body2.weight,
@@ -18,7 +29,26 @@ const tooltip = {
   [vars.borderRadius]: globalRefs.radius.xs,
   [vars.horizontalPadding]: globalRefs.spacing.md,
   [vars.verticalPadding]: globalRefs.spacing.sm,
-  [vars.boxShadow]: globalRefs.shadow.wide.sm,
+  [vars.boxShadow]: defaultShadow,
+
+  shadow: {
+    sm: {
+      [vars.boxShadow]: defaultShadow,
+    },
+    md: {
+      [vars.boxShadow]: `${globalRefs.shadow.wide.md} ${shadowColor}, ${globalRefs.shadow.narrow.md} ${shadowColor}`,
+    },
+    lg: {
+      [vars.boxShadow]: `${globalRefs.shadow.wide.lg} ${shadowColor}, ${globalRefs.shadow.narrow.lg} ${shadowColor}`,
+    },
+    xl: {
+      [vars.boxShadow]: `${globalRefs.shadow.wide.xl} ${shadowColor}, ${globalRefs.shadow.narrow.xl} ${shadowColor}`,
+    },
+    '2xl': {
+      [helperVars.shadowColor]: '#00000050', // mimic daisyUI shadow settings
+      [vars.boxShadow]: `${globalRefs.shadow.wide['2xl']} ${shadowColor}`,
+    },
+  },
 };
 
 export default tooltip;

package/stories/descope-tooltip.stories.js

@@ -1,5 +1,5 @@
 import { componentName } from '../src/component';
-import { directionControl } from '@descope-ui/common/sb-controls';
+import { boxShadowControl, directionControl } from '@descope-ui/common/sb-controls';
 
 const Template = ({
   text,
@@ -11,6 +11,8 @@ const Template = ({
   hideDelay,
   opened,
   readonly,
+  shadow,
+  'static-display': staticDisplay,
 }) => `
     <descope-tooltip
       text="${text || ''}"
@@ -20,6 +22,8 @@ const Template = ({
       st-host-direction="${direction ?? ''}"
       opened="${opened || false}"
       readonly="${readonly || false}"
+      shadow="${shadow || ''}"
+      static-display="${staticDisplay || false}"
     >
       ${type === 'node' ? `<descope-button class="tooltip-anchor" size="md" variant="contained" mode="primary" full-width="true">Click</descope-button>` : ''}
       ${type === 'text' ? `<span class="tooltip-anchor">${textContent}</span>` : ''}
@@ -105,6 +109,11 @@ export default {
       name: 'readonly',
       control: { type: 'boolean' },
     },
+    'static-display': {
+      name: 'Static Display',
+      control: { type: 'boolean' },
+    },
+    ...boxShadowControl,
   },
 };