@vaadin/tooltip 24.4.6 → 24.5.0-alpha10

package/README.md

@@ -50,7 +50,7 @@ import '@vaadin/tooltip/src/vaadin-tooltip.js';
 
 ## Contributing
 
-Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
+Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/tooltip",
-  "version": "24.4.6",
+  "version": "24.5.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -36,21 +36,23 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "~24.4.6",
-    "@vaadin/component-base": "~24.4.6",
-    "@vaadin/overlay": "~24.4.6",
-    "@vaadin/vaadin-lumo-styles": "~24.4.6",
-    "@vaadin/vaadin-material-styles": "~24.4.6",
-    "@vaadin/vaadin-themable-mixin": "~24.4.6"
+    "@vaadin/a11y-base": "24.5.0-alpha10",
+    "@vaadin/component-base": "24.5.0-alpha10",
+    "@vaadin/overlay": "24.5.0-alpha10",
+    "@vaadin/popover": "24.5.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.5.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.5.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha10",
+    "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.6.0",
-    "sinon": "^13.0.2"
+    "@vaadin/chai-plugins": "24.5.0-alpha10",
+    "@vaadin/testing-helpers": "^1.0.0",
+    "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "46d3cdb72eb99d544c7bb86c3de95043b9e5857f"
+  "gitHead": "6f9c37308031af872a98017bfab4de89aeacda51"
 }

package/src/vaadin-lit-tooltip-overlay.js

@@ -8,8 +8,8 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
+import { PopoverOverlayMixin } from '@vaadin/popover/src/vaadin-popover-overlay-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { TooltipOverlayMixin } from './vaadin-tooltip-overlay-mixin.js';
 import { tooltipOverlayStyles } from './vaadin-tooltip-overlay-styles.js';
 
 /**
@@ -19,10 +19,10 @@ import { tooltipOverlayStyles } from './vaadin-tooltip-overlay-styles.js';
  * @extends HTMLElement
  * @mixes DirMixin
  * @mixes ThemableMixin
- * @mixes TooltipOverlayMixin
+ * @mixes PopoverOverlayMixin
  * @private
  */
-class TooltipOverlay extends TooltipOverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class TooltipOverlay extends PopoverOverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
   static get is() {
     return 'vaadin-tooltip-overlay';
   }
@@ -31,6 +31,15 @@ class TooltipOverlay extends TooltipOverlayMixin(DirMixin(ThemableMixin(PolylitM
     return [overlayStyles, tooltipOverlayStyles];
   }
 
+  /**
+   * Tag name prefix used by custom properties.
+   * @protected
+   * @return {string}
+   */
+  get _tagNamePrefix() {
+    return 'vaadin-tooltip';
+  }
+
   /** @protected */
   render() {
     return html`
@@ -40,6 +49,12 @@ class TooltipOverlay extends TooltipOverlayMixin(DirMixin(ThemableMixin(PolylitM
       </div>
     `;
   }
+
+  requestContentUpdate() {
+    super.requestContentUpdate();
+
+    this.toggleAttribute('hidden', this.textContent.trim() === '');
+  }
 }
 
 defineCustomElement(TooltipOverlay);

package/src/vaadin-tooltip-mixin.d.ts

@@ -5,27 +5,21 @@
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
+import type { PopoverPositionMixinClass } from '@vaadin/popover/src/vaadin-popover-position-mixin.js';
+import type { PopoverTargetMixinClass } from '@vaadin/popover/src/vaadin-popover-target-mixin.js';
 
-export type TooltipPosition =
-  | 'bottom-end'
-  | 'bottom-start'
-  | 'bottom'
-  | 'end-bottom'
-  | 'end-top'
-  | 'end'
-  | 'start-bottom'
-  | 'start-top'
-  | 'start'
-  | 'top-end'
-  | 'top-start'
-  | 'top';
+export type { PopoverPosition as TooltipPosition } from '@vaadin/popover/src/vaadin-popover-position-mixin.js';
 
 /**
  * A mixin providing common tooltip functionality.
  */
 export declare function TooltipMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<OverlayClassMixinClass> & Constructor<TooltipMixinClass> & T;
+): Constructor<OverlayClassMixinClass> &
+  Constructor<PopoverPositionMixinClass> &
+  Constructor<PopoverTargetMixinClass> &
+  Constructor<TooltipMixinClass> &
+  T;
 
 export declare class TooltipMixinClass {
   /**
@@ -49,13 +43,6 @@ export declare class TooltipMixinClass {
    */
   focusDelay: number;
 
-  /**
-   * The id of the element used as a tooltip trigger.
-   * The element should be in the DOM by the time when
-   * the attribute is set, otherwise a warning is shown.
-   */
-  for: string | undefined;
-
   /**
    * Function used to generate the tooltip content.
    * When provided, it overrides the `text` property.
@@ -91,14 +78,6 @@ export declare class TooltipMixinClass {
    */
   opened: boolean;
 
-  /**
-   * Position of the tooltip with respect to its target.
-   * Supported values: `top-start`, `top`, `top-end`,
-   * `bottom-start`, `bottom`, `bottom-end`, `start-top`,
-   * `start`, `start-bottom`, `end-top`, `end`, `end-bottom`.
-   */
-  position: TooltipPosition;
-
   /**
    * Function used to detect whether to show the tooltip based on a condition,
    * called every time the tooltip is about to be shown on hover and focus.
@@ -108,13 +87,6 @@ export declare class TooltipMixinClass {
    */
   shouldShow: (target: HTMLElement, context?: Record<string, unknown>) => boolean;
 
-  /**
-   * Reference to the element used as a tooltip trigger.
-   * The target must be placed in the same shadow scope.
-   * Defaults to an element referenced with `for`.
-   */
-  target: HTMLElement | undefined;
-
   /**
    * String used as a tooltip content.
    */

package/src/vaadin-tooltip-mixin.js

@@ -4,12 +4,12 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
-import { microTask } from '@vaadin/component-base/src/async.js';
-import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
 import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
+import { PopoverPositionMixin } from '@vaadin/popover/src/vaadin-popover-position-mixin.js';
+import { PopoverTargetMixin } from '@vaadin/popover/src/vaadin-popover-target-mixin.js';
 
 const DEFAULT_DELAY = 500;
 
@@ -216,9 +216,11 @@ class TooltipStateController {
  *
  * @polymerMixin
  * @mixes OverlayClassMixin
+ * @mixes PopoverPositionMixin
+ * @mixes PopoverTargetMixin
  */
 export const TooltipMixin = (superClass) =>
-  class TooltipMixinClass extends OverlayClassMixin(superClass) {
+  class TooltipMixinClass extends PopoverPositionMixin(PopoverTargetMixin(OverlayClassMixin(superClass))) {
     static get properties() {
       return {
         /**
@@ -251,16 +253,6 @@ export const TooltipMixin = (superClass) =>
           type: Number,
         },
 
-        /**
-         * The id of the element used as a tooltip trigger.
-         * The element should be in the DOM by the time when
-         * the attribute is set, otherwise a warning is shown.
-         */
-        for: {
-          type: String,
-          observer: '__forChanged',
-        },
-
         /**
          * Function used to generate the tooltip content.
          * When provided, it overrides the `text` property.
@@ -310,16 +302,6 @@ export const TooltipMixin = (superClass) =>
           sync: true,
         },
 
-        /**
-         * Position of the tooltip with respect to its target.
-         * Supported values: `top-start`, `top`, `top-end`,
-         * `bottom-start`, `bottom`, `bottom-end`, `start-top`,
-         * `start`, `start-bottom`, `end-top`, `end`, `end-bottom`.
-         */
-        position: {
-          type: String,
-        },
-
         /**
          * Function used to detect whether to show the tooltip based on a condition,
          * called every time the tooltip is about to be shown on hover and focus.
@@ -334,16 +316,6 @@ export const TooltipMixin = (superClass) =>
           },
         },
 
-        /**
-         * Reference to the element used as a tooltip trigger.
-         * The target must be placed in the same shadow scope.
-         * Defaults to an element referenced with `for`.
-         */
-        target: {
-          type: Object,
-          observer: '__targetChanged',
-        },
-
         /**
          * String used as a tooltip content.
          */
@@ -374,12 +346,6 @@ export const TooltipMixin = (superClass) =>
           observer: '__effectiveAriaTargetChanged',
         },
 
-        /** @private */
-        __effectivePosition: {
-          type: String,
-          computed: '__computePosition(position, _position)',
-        },
-
         /** @private */
         __isTargetHidden: {
           type: Boolean,
@@ -392,15 +358,6 @@ export const TooltipMixin = (superClass) =>
           sync: true,
         },
 
-        /**
-         * Default value used when `position` property is not set.
-         * @protected
-         */
-        _position: {
-          type: String,
-          value: 'bottom',
-        },
-
         /** @private */
         _srLabel: {
           type: Object,
@@ -509,36 +466,11 @@ export const TooltipMixin = (superClass) =>
       this.addController(this._srLabelController);
     }
 
-    /** @private */
-    __computeHorizontalAlign(position) {
-      return ['top-end', 'bottom-end', 'start-top', 'start', 'start-bottom'].includes(position) ? 'end' : 'start';
-    }
-
-    /** @private */
-    __computeNoHorizontalOverlap(position) {
-      return ['start-top', 'start', 'start-bottom', 'end-top', 'end', 'end-bottom'].includes(position);
-    }
-
-    /** @private */
-    __computeNoVerticalOverlap(position) {
-      return ['top-start', 'top-end', 'top', 'bottom-start', 'bottom', 'bottom-end'].includes(position);
-    }
-
-    /** @private */
-    __computeVerticalAlign(position) {
-      return ['top-start', 'top-end', 'top', 'start-bottom', 'end-bottom'].includes(position) ? 'bottom' : 'top';
-    }
-
     /** @private */
     __computeOpened(manual, opened, autoOpened, connected) {
       return connected && (manual ? opened : autoOpened);
     }
 
-    /** @private */
-    __computePosition(position, defaultPosition) {
-      return position || defaultPosition;
-    }
-
     /** @private */
     __autoOpenedChanged(opened, oldOpened) {
       if (opened) {
@@ -548,54 +480,37 @@ export const TooltipMixin = (superClass) =>
       }
     }
 
-    /** @private */
-    __forChanged(forId) {
-      if (forId) {
-        this.__setTargetByIdDebouncer = Debouncer.debounce(this.__setTargetByIdDebouncer, microTask, () =>
-          this.__setTargetById(forId),
-        );
-      }
-    }
-
-    /** @private */
-    __setTargetById(targetId) {
-      if (!this.isConnected) {
-        return;
-      }
-
-      const target = this.getRootNode().getElementById(targetId);
-
-      if (target) {
-        this.target = target;
-      } else {
-        console.warn(`No element with id="${targetId}" found to show tooltip.`);
-      }
+    /**
+     * @param {HTMLElement} target
+     * @protected
+     * @override
+     */
+    _addTargetListeners(target) {
+      target.addEventListener('mouseenter', this.__onMouseEnter);
+      target.addEventListener('mouseleave', this.__onMouseLeave);
+      target.addEventListener('focusin', this.__onFocusin);
+      target.addEventListener('focusout', this.__onFocusout);
+      target.addEventListener('mousedown', this.__onMouseDown);
+
+      // Wait before observing to avoid Chrome issue.
+      requestAnimationFrame(() => {
+        this.__targetVisibilityObserver.observe(target);
+      });
     }
 
-    /** @private */
-    __targetChanged(target, oldTarget) {
-      if (oldTarget) {
-        oldTarget.removeEventListener('mouseenter', this.__onMouseEnter);
-        oldTarget.removeEventListener('mouseleave', this.__onMouseLeave);
-        oldTarget.removeEventListener('focusin', this.__onFocusin);
-        oldTarget.removeEventListener('focusout', this.__onFocusout);
-        oldTarget.removeEventListener('mousedown', this.__onMouseDown);
-
-        this.__targetVisibilityObserver.unobserve(oldTarget);
-      }
-
-      if (target) {
-        target.addEventListener('mouseenter', this.__onMouseEnter);
-        target.addEventListener('mouseleave', this.__onMouseLeave);
-        target.addEventListener('focusin', this.__onFocusin);
-        target.addEventListener('focusout', this.__onFocusout);
-        target.addEventListener('mousedown', this.__onMouseDown);
-
-        // Wait before observing to avoid Chrome issue.
-        requestAnimationFrame(() => {
-          this.__targetVisibilityObserver.observe(target);
-        });
-      }
+    /**
+     * @param {HTMLElement} target
+     * @protected
+     * @override
+     */
+    _removeTargetListeners(target) {
+      target.removeEventListener('mouseenter', this.__onMouseEnter);
+      target.removeEventListener('mouseleave', this.__onMouseLeave);
+      target.removeEventListener('focusin', this.__onFocusin);
+      target.removeEventListener('focusout', this.__onFocusout);
+      target.removeEventListener('mousedown', this.__onMouseDown);
+
+      this.__targetVisibilityObserver.unobserve(target);
     }
 
     /** @private */

package/src/vaadin-tooltip-overlay.js

@@ -7,8 +7,8 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
+import { PopoverOverlayMixin } from '@vaadin/popover/src/vaadin-popover-overlay-mixin.js';
 import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { TooltipOverlayMixin } from './vaadin-tooltip-overlay-mixin.js';
 import { tooltipOverlayStyles } from './vaadin-tooltip-overlay-styles.js';
 
 registerStyles('vaadin-tooltip-overlay', [overlayStyles, tooltipOverlayStyles], {
@@ -22,10 +22,10 @@ registerStyles('vaadin-tooltip-overlay', [overlayStyles, tooltipOverlayStyles],
  * @extends HTMLElement
  * @mixes DirMixin
  * @mixes ThemableMixin
- * @mixes TooltipOverlayMixin
+ * @mixes PopoverOverlayMixin
  * @private
  */
-class TooltipOverlay extends TooltipOverlayMixin(DirMixin(ThemableMixin(PolymerElement))) {
+class TooltipOverlay extends PopoverOverlayMixin(DirMixin(ThemableMixin(PolymerElement))) {
   static get is() {
     return 'vaadin-tooltip-overlay';
   }
@@ -39,6 +39,15 @@ class TooltipOverlay extends TooltipOverlayMixin(DirMixin(ThemableMixin(PolymerE
     `;
   }
 
+  /**
+   * Tag name prefix used by custom properties.
+   * @protected
+   * @return {string}
+   */
+  get _tagNamePrefix() {
+    return 'vaadin-tooltip';
+  }
+
   /** @protected */
   ready() {
     super.ready();
@@ -49,6 +58,12 @@ class TooltipOverlay extends TooltipOverlayMixin(DirMixin(ThemableMixin(PolymerE
     this.owner = this.__dataHost;
     this.owner._overlayElement = this;
   }
+
+  requestContentUpdate() {
+    super.requestContentUpdate();
+
+    this.toggleAttribute('hidden', this.textContent.trim() === '');
+  }
 }
 
 defineCustomElement(TooltipOverlay);

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tooltip",
-  "version": "24.4.6",
+  "version": "24.5.0-alpha10",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-tooltip",
-          "description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Styling\n\n`<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.4.6/#/elements/vaadin-overlay) documentation\nfor `<vaadin-tooltip-overlay>` parts.\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|----------------------------------------\n`position`       | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-tooltip>` is\npropagated to the internal `<vaadin-tooltip-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-tooltip>` element:\n\nCustom CSS property              | Description\n---------------------------------|-------------\n`--vaadin-tooltip-offset-top`    | Used as an offset when the tooltip is aligned vertically below the target\n`--vaadin-tooltip-offset-bottom` | Used as an offset when the tooltip is aligned vertically above the target\n`--vaadin-tooltip-offset-start`  | Used as an offset when the tooltip is aligned horizontally after the target\n`--vaadin-tooltip-offset-end`    | Used as an offset when the tooltip is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Styling\n\n`<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha10/#/elements/vaadin-overlay) documentation\nfor `<vaadin-tooltip-overlay>` parts.\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|----------------------------------------\n`position`       | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-tooltip>` is\npropagated to the internal `<vaadin-tooltip-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-tooltip>` element:\n\nCustom CSS property              | Description\n---------------------------------|-------------\n`--vaadin-tooltip-offset-top`    | Used as an offset when the tooltip is aligned vertically below the target\n`--vaadin-tooltip-offset-bottom` | Used as an offset when the tooltip is aligned vertically above the target\n`--vaadin-tooltip-offset-start`  | Used as an offset when the tooltip is aligned horizontally after the target\n`--vaadin-tooltip-offset-end`    | Used as an offset when the tooltip is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "overlay-class",
@@ -22,11 +22,11 @@
               }
             },
             {
-              "name": "focus-delay",
-              "description": "The delay in milliseconds before the tooltip\nis opened on keyboard focus, when not in manual mode.",
+              "name": "position",
+              "description": "Position of the overlay with respect to the target.\nSupported values: `top-start`, `top`, `top-end`,\n`bottom-start`, `bottom`, `bottom-end`, `start-top`,\n`start`, `start-bottom`, `end-top`, `end`, `end-bottom`.",
               "value": {
                 "type": [
-                  "number",
+                  "string",
                   "null",
                   "undefined"
                 ]
@@ -34,7 +34,7 @@
             },
             {
               "name": "for",
-              "description": "The id of the element used as a tooltip trigger.\nThe element should be in the DOM by the time when\nthe attribute is set, otherwise a warning is shown.",
+              "description": "The id of the element to be used as `target` value.\nThe element should be in the DOM by the time when\nthe attribute is set, otherwise a warning is shown.",
               "value": {
                 "type": [
                   "string",
@@ -43,6 +43,17 @@
                 ]
               }
             },
+            {
+              "name": "focus-delay",
+              "description": "The delay in milliseconds before the tooltip\nis opened on keyboard focus, when not in manual mode.",
+              "value": {
+                "type": [
+                  "number",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "hide-delay",
               "description": "The delay in milliseconds before the tooltip\nis closed on losing hover, when not in manual mode.\nOn blur, the tooltip is closed immediately.",
@@ -87,17 +98,6 @@
                 ]
               }
             },
-            {
-              "name": "position",
-              "description": "Position of the tooltip with respect to its target.\nSupported values: `top-start`, `top`, `top-end`,\n`bottom-start`, `bottom`, `bottom-end`, `start-top`,\n`start`, `start-bottom`, `end-top`, `end`, `end-bottom`.",
-              "value": {
-                "type": [
-                  "string",
-                  "null",
-                  "undefined"
-                ]
-              }
-            },
             {
               "name": "text",
               "description": "String used as a tooltip content.",
@@ -135,8 +135,30 @@
                 }
               },
               {
-                "name": "ariaTarget",
-                "description": "Element used to link with the `aria-describedby`\nattribute. Supports array of multiple elements.\nWhen not set, defaults to `target`.",
+                "name": "position",
+                "description": "Position of the overlay with respect to the target.\nSupported values: `top-start`, `top`, `top-end`,\n`bottom-start`, `bottom`, `bottom-end`, `start-top`,\n`start`, `start-bottom`, `end-top`, `end`, `end-bottom`.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "for",
+                "description": "The id of the element to be used as `target` value.\nThe element should be in the DOM by the time when\nthe attribute is set, otherwise a warning is shown.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "target",
+                "description": "Reference to the DOM element used both to trigger the overlay\nby user interaction and to visually position it on the screen.\n\nDefaults to an element referenced with `for` attribute, in\nwhich case it must be located in the same shadow scope.",
                 "value": {
                   "type": [
                     "Object",
@@ -146,8 +168,8 @@
                 }
               },
               {
-                "name": "context",
-                "description": "Object with properties passed to `generator` and\n`shouldShow` functions for generating tooltip text\nor detecting whether to show the tooltip or not.",
+                "name": "ariaTarget",
+                "description": "Element used to link with the `aria-describedby`\nattribute. Supports array of multiple elements.\nWhen not set, defaults to `target`.",
                 "value": {
                   "type": [
                     "Object",
@@ -157,22 +179,22 @@
                 }
               },
               {
-                "name": "focusDelay",
-                "description": "The delay in milliseconds before the tooltip\nis opened on keyboard focus, when not in manual mode.",
+                "name": "context",
+                "description": "Object with properties passed to `generator` and\n`shouldShow` functions for generating tooltip text\nor detecting whether to show the tooltip or not.",
                 "value": {
                   "type": [
-                    "number",
+                    "Object",
                     "null",
                     "undefined"
                   ]
                 }
               },
               {
-                "name": "for",
-                "description": "The id of the element used as a tooltip trigger.\nThe element should be in the DOM by the time when\nthe attribute is set, otherwise a warning is shown.",
+                "name": "focusDelay",
+                "description": "The delay in milliseconds before the tooltip\nis opened on keyboard focus, when not in manual mode.",
                 "value": {
                   "type": [
-                    "string",
+                    "number",
                     "null",
                     "undefined"
                   ]
@@ -233,17 +255,6 @@
                   ]
                 }
               },
-              {
-                "name": "position",
-                "description": "Position of the tooltip with respect to its target.\nSupported values: `top-start`, `top`, `top-end`,\n`bottom-start`, `bottom`, `bottom-end`, `start-top`,\n`start`, `start-bottom`, `end-top`, `end`, `end-bottom`.",
-                "value": {
-                  "type": [
-                    "string",
-                    "null",
-                    "undefined"
-                  ]
-                }
-              },
               {
                 "name": "shouldShow",
                 "description": "Function used to detect whether to show the tooltip based on a condition,\ncalled every time the tooltip is about to be shown on hover and focus.\nThe function takes two parameters: `target` and `context`, which contain\nvalues of the corresponding tooltip properties at the time of calling.\nThe tooltip is only shown when the function invocation returns `true`.",
@@ -255,17 +266,6 @@
                   ]
                 }
               },
-              {
-                "name": "target",
-                "description": "Reference to the element used as a tooltip trigger.\nThe target must be placed in the same shadow scope.\nDefaults to an element referenced with `for`.",
-                "value": {
-                  "type": [
-                    "Object",
-                    "null",
-                    "undefined"
-                  ]
-                }
-              },
               {
                 "name": "text",
                 "description": "String used as a tooltip content.",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tooltip",
-  "version": "24.4.6",
+  "version": "24.5.0-alpha10",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-tooltip",
-          "description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Styling\n\n`<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.4.6/#/elements/vaadin-overlay) documentation\nfor `<vaadin-tooltip-overlay>` parts.\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|----------------------------------------\n`position`       | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-tooltip>` is\npropagated to the internal `<vaadin-tooltip-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-tooltip>` element:\n\nCustom CSS property              | Description\n---------------------------------|-------------\n`--vaadin-tooltip-offset-top`    | Used as an offset when the tooltip is aligned vertically below the target\n`--vaadin-tooltip-offset-bottom` | Used as an offset when the tooltip is aligned vertically above the target\n`--vaadin-tooltip-offset-start`  | Used as an offset when the tooltip is aligned horizontally after the target\n`--vaadin-tooltip-offset-end`    | Used as an offset when the tooltip is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Styling\n\n`<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha10/#/elements/vaadin-overlay) documentation\nfor `<vaadin-tooltip-overlay>` parts.\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|----------------------------------------\n`position`       | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-tooltip>` is\npropagated to the internal `<vaadin-tooltip-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-tooltip>` element:\n\nCustom CSS property              | Description\n---------------------------------|-------------\n`--vaadin-tooltip-offset-top`    | Used as an offset when the tooltip is aligned vertically below the target\n`--vaadin-tooltip-offset-bottom` | Used as an offset when the tooltip is aligned vertically above the target\n`--vaadin-tooltip-offset-start`  | Used as an offset when the tooltip is aligned horizontally after the target\n`--vaadin-tooltip-offset-end`    | Used as an offset when the tooltip is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -41,71 +41,71 @@
               }
             },
             {
-              "name": ".ariaTarget",
-              "description": "Element used to link with the `aria-describedby`\nattribute. Supports array of multiple elements.\nWhen not set, defaults to `target`.",
+              "name": ".position",
+              "description": "Position of the overlay with respect to the target.\nSupported values: `top-start`, `top`, `top-end`,\n`bottom-start`, `bottom`, `bottom-end`, `start-top`,\n`start`, `start-bottom`, `end-top`, `end`, `end-bottom`.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": ".context",
-              "description": "Object with properties passed to `generator` and\n`shouldShow` functions for generating tooltip text\nor detecting whether to show the tooltip or not.",
+              "name": ".for",
+              "description": "The id of the element to be used as `target` value.\nThe element should be in the DOM by the time when\nthe attribute is set, otherwise a warning is shown.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": ".focusDelay",
-              "description": "The delay in milliseconds before the tooltip\nis opened on keyboard focus, when not in manual mode.",
+              "name": ".target",
+              "description": "Reference to the DOM element used both to trigger the overlay\nby user interaction and to visually position it on the screen.\n\nDefaults to an element referenced with `for` attribute, in\nwhich case it must be located in the same shadow scope.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": ".for",
-              "description": "The id of the element used as a tooltip trigger.\nThe element should be in the DOM by the time when\nthe attribute is set, otherwise a warning is shown.",
+              "name": ".ariaTarget",
+              "description": "Element used to link with the `aria-describedby`\nattribute. Supports array of multiple elements.\nWhen not set, defaults to `target`.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": ".generator",
-              "description": "Function used to generate the tooltip content.\nWhen provided, it overrides the `text` property.\nUse the `context` property to provide argument\nthat can be passed to the generator function.",
+              "name": ".context",
+              "description": "Object with properties passed to `generator` and\n`shouldShow` functions for generating tooltip text\nor detecting whether to show the tooltip or not.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": ".hideDelay",
-              "description": "The delay in milliseconds before the tooltip\nis closed on losing hover, when not in manual mode.\nOn blur, the tooltip is closed immediately.",
+              "name": ".focusDelay",
+              "description": "The delay in milliseconds before the tooltip\nis opened on keyboard focus, when not in manual mode.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": ".hoverDelay",
-              "description": "The delay in milliseconds before the tooltip\nis opened on hover, when not in manual mode.",
+              "name": ".generator",
+              "description": "Function used to generate the tooltip content.\nWhen provided, it overrides the `text` property.\nUse the `context` property to provide argument\nthat can be passed to the generator function.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": ".position",
-              "description": "Position of the tooltip with respect to its target.\nSupported values: `top-start`, `top`, `top-end`,\n`bottom-start`, `bottom`, `bottom-end`, `start-top`,\n`start`, `start-bottom`, `end-top`, `end`, `end-bottom`.",
+              "name": ".hideDelay",
+              "description": "The delay in milliseconds before the tooltip\nis closed on losing hover, when not in manual mode.\nOn blur, the tooltip is closed immediately.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": ".shouldShow",
-              "description": "Function used to detect whether to show the tooltip based on a condition,\ncalled every time the tooltip is about to be shown on hover and focus.\nThe function takes two parameters: `target` and `context`, which contain\nvalues of the corresponding tooltip properties at the time of calling.\nThe tooltip is only shown when the function invocation returns `true`.",
+              "name": ".hoverDelay",
+              "description": "The delay in milliseconds before the tooltip\nis opened on hover, when not in manual mode.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": ".target",
-              "description": "Reference to the element used as a tooltip trigger.\nThe target must be placed in the same shadow scope.\nDefaults to an element referenced with `for`.",
+              "name": ".shouldShow",
+              "description": "Function used to detect whether to show the tooltip based on a condition,\ncalled every time the tooltip is about to be shown on hover and focus.\nThe function takes two parameters: `target` and `context`, which contain\nvalues of the corresponding tooltip properties at the time of calling.\nThe tooltip is only shown when the function invocation returns `true`.",
               "value": {
                 "kind": "expression"
               }

package/src/vaadin-tooltip-overlay-mixin.js

@@ -1,86 +0,0 @@
-/**
- * @license
- * Copyright (c) 2022 - 2024 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
-import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
-
-/**
- * A mixin providing common tooltip overlay functionality.
- *
- * @polymerMixin
- * @mixes PositionMixin
- * @mixes OverlayMixin
- */
-export const TooltipOverlayMixin = (superClass) =>
-  class TooltipOverlayMixinClass extends PositionMixin(OverlayMixin(superClass)) {
-    static get properties() {
-      return {
-        position: {
-          type: String,
-          reflectToAttribute: true,
-        },
-      };
-    }
-
-    requestContentUpdate() {
-      super.requestContentUpdate();
-
-      this.toggleAttribute('hidden', this.textContent.trim() === '');
-
-      // Copy custom properties from the tooltip
-      if (this.positionTarget && this.owner) {
-        const style = getComputedStyle(this.owner);
-        ['top', 'bottom', 'start', 'end'].forEach((prop) => {
-          this.style.setProperty(
-            `--vaadin-tooltip-offset-${prop}`,
-            style.getPropertyValue(`--vaadin-tooltip-offset-${prop}`),
-          );
-        });
-      }
-    }
-
-    /**
-     * @protected
-     * @override
-     */
-    _updatePosition() {
-      super._updatePosition();
-
-      if (!this.positionTarget) {
-        return;
-      }
-
-      // Center the tooltip overlay horizontally
-      if (this.position === 'bottom' || this.position === 'top') {
-        const targetRect = this.positionTarget.getBoundingClientRect();
-        const overlayRect = this.$.overlay.getBoundingClientRect();
-
-        const offset = targetRect.width / 2 - overlayRect.width / 2;
-
-        if (this.style.left) {
-          const left = overlayRect.left + offset;
-          if (left > 0) {
-            this.style.left = `${left}px`;
-          }
-        }
-
-        if (this.style.right) {
-          const right = parseFloat(this.style.right) + offset;
-          if (right > 0) {
-            this.style.right = `${right}px`;
-          }
-        }
-      }
-
-      // Center the tooltip overlay vertically
-      if (this.position === 'start' || this.position === 'end') {
-        const targetRect = this.positionTarget.getBoundingClientRect();
-        const overlayRect = this.$.overlay.getBoundingClientRect();
-
-        const offset = targetRect.height / 2 - overlayRect.height / 2;
-        this.style.top = `${overlayRect.top + offset}px`;
-      }
-    }
-  };