@vaadin/tooltip 23.3.0-alpha1 → 23.3.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/tooltip",
-  "version": "23.3.0-alpha1",
+  "version": "23.3.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -35,11 +35,11 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.3.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha1",
-    "@vaadin/vaadin-material-styles": "23.3.0-alpha1",
-    "@vaadin/vaadin-overlay": "23.3.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha1"
+    "@vaadin/component-base": "23.3.0-alpha3",
+    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha3",
+    "@vaadin/vaadin-material-styles": "23.3.0-alpha3",
+    "@vaadin/vaadin-overlay": "23.3.0-alpha3",
+    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -50,5 +50,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "beabc527d4b1274eb798ff701d406fed45cfe638"
+  "gitHead": "e86cd2abf3e28bade37711291331415d92c454ec"
 }

package/src/vaadin-tooltip-overlay.js

@@ -64,6 +64,17 @@ class TooltipOverlay extends PositionMixin(OverlayElement) {
     };
   }
 
+  /** @protected */
+  ready() {
+    super.ready();
+
+    // When setting `manual` and `opened` attributes, the overlay is already moved to body
+    // by the time when `ready()` callback of the `vaadin-tooltip` is executed by Polymer,
+    // so querySelector() would return null. So we use this workaround to set properties.
+    this.owner = this.__dataHost;
+    this.owner._overlayElement = this;
+  }
+
   requestContentUpdate() {
     super.requestContentUpdate();
 

package/src/vaadin-tooltip.d.ts

@@ -78,14 +78,15 @@ declare class Tooltip extends ThemePropertyMixin(ElementMixin(HTMLElement)) {
   static setDefaultHoverDelay(delay: number): void;
 
   /**
-   * Object with properties passed to `textGenerator`
-   * function to be used for generating tooltip text.
+   * Object with properties passed to `generator` and
+   * `shouldShow` functions for generating tooltip text
+   * or detecting whether to show the tooltip or not.
    */
   context: Record<string, unknown>;
 
   /**
    * The delay in milliseconds before the tooltip
-   * is opened on focus, when not in manual mode.
+   * is opened on keyboard focus, when not in manual mode.
    * @attr {number} focus-delay
    */
   focusDelay: number;
@@ -135,10 +136,11 @@ declare class Tooltip extends ThemePropertyMixin(ElementMixin(HTMLElement)) {
   /**
    * 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.
-   * The function accepts a reference to the target element as a parameter.
+   * The function takes two parameters: `target` and `context`, which contain
+   * values of the corresponding tooltip properties at the time of calling.
    * The tooltip is only shown when the function invocation returns `true`.
    */
-  shouldShow: (target: HTMLElement) => boolean;
+  shouldShow: (target: HTMLElement, context?: Record<string, unknown>) => boolean;
 
   /**
    * Reference to the element used as a tooltip trigger.
@@ -158,7 +160,7 @@ declare class Tooltip extends ThemePropertyMixin(ElementMixin(HTMLElement)) {
    * Use the `context` property to provide argument
    * that can be passed to the generator function.
    */
-  textGenerator: (context: Record<string, unknown>) => string;
+  generator: (context: Record<string, unknown>) => string;
 }
 
 declare global {

package/src/vaadin-tooltip.js

@@ -23,6 +23,174 @@ let warmedUp = false;
 let warmUpTimeout = null;
 let cooldownTimeout = null;
 
+/**
+ * Controller for handling tooltip opened state.
+ */
+class TooltipStateController {
+  constructor(host) {
+    this.host = host;
+  }
+
+  /**
+   * Schedule opening the tooltip.
+   * @param {Object} options
+   */
+  open(options = { immediate: false }) {
+    const { immediate, hover, focus } = options;
+    const isHover = hover && this.hoverDelay > 0;
+    const isFocus = focus && this.focusDelay > 0;
+
+    if (!immediate && (isHover || isFocus) && !this.__closeTimeout) {
+      this.__warmupTooltip(isFocus);
+    } else {
+      this.__showTooltip();
+    }
+  }
+
+  /**
+   * Schedule closing the tooltip.
+   * @param {boolean} immediate
+   */
+  close(immediate) {
+    if (!immediate && this.hideDelay > 0) {
+      this.__scheduleClose();
+    } else {
+      this.__abortClose();
+      this._setOpened(false);
+    }
+
+    this.__abortWarmUp();
+
+    if (warmedUp) {
+      // Re-start cooldown timer on each tooltip closing.
+      this.__abortCooldown();
+      this.__scheduleCooldown();
+    }
+  }
+
+  /** @private */
+  get openedProp() {
+    return this.host.manual ? 'opened' : '_autoOpened';
+  }
+
+  /** @private */
+  get focusDelay() {
+    const tooltip = this.host;
+    return tooltip.focusDelay != null && tooltip.focusDelay > 0 ? tooltip.focusDelay : defaultFocusDelay;
+  }
+
+  /** @private */
+  get hoverDelay() {
+    const tooltip = this.host;
+    return tooltip.hoverDelay != null && tooltip.hoverDelay > 0 ? tooltip.hoverDelay : defaultHoverDelay;
+  }
+
+  /** @private */
+  get hideDelay() {
+    const tooltip = this.host;
+    return tooltip.hideDelay != null && tooltip.hideDelay > 0 ? tooltip.hideDelay : defaultHideDelay;
+  }
+
+  /** @private */
+  _isOpened() {
+    return this.host[this.openedProp];
+  }
+
+  /** @private */
+  _setOpened(opened) {
+    this.host[this.openedProp] = opened;
+  }
+
+  /** @private */
+  __flushClosingTooltips() {
+    closing.forEach((tooltip) => {
+      tooltip._stateController.close(true);
+      closing.delete(tooltip);
+    });
+  }
+
+  /** @private */
+  __showTooltip() {
+    this.__abortClose();
+    this.__flushClosingTooltips();
+
+    this._setOpened(true);
+    warmedUp = true;
+
+    // Abort previously scheduled timers.
+    this.__abortWarmUp();
+    this.__abortCooldown();
+  }
+
+  /** @private */
+  __warmupTooltip(isFocus) {
+    if (!this._isOpened()) {
+      // First tooltip is opened, warm up.
+      if (!warmedUp) {
+        this.__scheduleWarmUp(isFocus);
+      } else {
+        // Warmed up, show another tooltip.
+        this.__showTooltip();
+      }
+    }
+  }
+
+  /** @private */
+  __abortClose() {
+    if (this.__closeTimeout) {
+      clearTimeout(this.__closeTimeout);
+      this.__closeTimeout = null;
+    }
+  }
+
+  /** @private */
+  __abortCooldown() {
+    if (cooldownTimeout) {
+      clearTimeout(cooldownTimeout);
+      cooldownTimeout = null;
+    }
+  }
+
+  /** @private */
+  __abortWarmUp() {
+    if (warmUpTimeout) {
+      clearTimeout(warmUpTimeout);
+      warmUpTimeout = null;
+    }
+  }
+
+  /** @private */
+  __scheduleClose() {
+    if (this._isOpened()) {
+      closing.add(this.host);
+
+      this.__closeTimeout = setTimeout(() => {
+        closing.delete(this.host);
+        this.__closeTimeout = null;
+        this._setOpened(false);
+      }, this.hideDelay);
+    }
+  }
+
+  /** @private */
+  __scheduleCooldown() {
+    cooldownTimeout = setTimeout(() => {
+      cooldownTimeout = null;
+      warmedUp = false;
+    }, this.hideDelay);
+  }
+
+  /** @private */
+  __scheduleWarmUp(isFocus) {
+    const delay = isFocus ? this.focusDelay : this.hoverDelay;
+    warmUpTimeout = setTimeout(() => {
+      warmUpTimeout = null;
+      warmedUp = true;
+      this.__showTooltip();
+    }, delay);
+  }
+}
+
 /**
  * `<vaadin-tooltip>` is a Web Component for creating tooltips.
  *
@@ -82,13 +250,14 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
         role="tooltip"
         renderer="[[_renderer]]"
         theme$="[[_theme]]"
-        opened="[[__computeOpened(manual, opened, _autoOpened)]]"
+        opened="[[__computeOpened(manual, opened, _autoOpened, _isConnected)]]"
         position-target="[[target]]"
-        position="[[position]]"
-        no-horizontal-overlap$="[[__computeNoHorizontalOverlap(position)]]"
-        no-vertical-overlap$="[[__computeNoVerticalOverlap(position)]]"
-        horizontal-align="[[__computeHorizontalAlign(position)]]"
-        vertical-align="[[__computeVerticalAlign(position)]]"
+        position="[[__effectivePosition]]"
+        no-horizontal-overlap$="[[__computeNoHorizontalOverlap(__effectivePosition)]]"
+        no-vertical-overlap$="[[__computeNoVerticalOverlap(__effectivePosition)]]"
+        horizontal-align="[[__computeHorizontalAlign(__effectivePosition)]]"
+        vertical-align="[[__computeVerticalAlign(__effectivePosition)]]"
+        on-mouseleave="__onOverlayMouseLeave"
         modeless
       ></vaadin-tooltip-overlay>
     `;
@@ -97,8 +266,9 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
   static get properties() {
     return {
       /**
-       * Object with properties passed to `textGenerator`
-       * function to be used for generating tooltip text.
+       * Object with properties passed to `generator` and
+       * `shouldShow` functions for generating tooltip text
+       * or detecting whether to show the tooltip or not.
        */
       context: {
         type: Object,
@@ -109,7 +279,7 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
 
       /**
        * The delay in milliseconds before the tooltip
-       * is opened on focus, when not in manual mode.
+       * is opened on keyboard focus, when not in manual mode.
        * @attr {number} focus-delay
        */
       focusDelay: {
@@ -171,19 +341,19 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
        */
       position: {
         type: String,
-        value: 'bottom',
       },
 
       /**
        * 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.
-       * The function accepts a reference to the target element as a parameter.
+       * The function takes two parameters: `target` and `context`, which contain
+       * values of the corresponding tooltip properties at the time of calling.
        * The tooltip is only shown when the function invocation returns `true`.
        */
       shouldShow: {
         type: Object,
         value: () => {
-          return (_target) => true;
+          return (_target, _context) => true;
         },
       },
 
@@ -211,7 +381,7 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
        * Use the `context` property to provide argument
        * that can be passed to the generator function.
        */
-      textGenerator: {
+      generator: {
         type: Object,
       },
 
@@ -225,6 +395,21 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
         observer: '__autoOpenedChanged',
       },
 
+      /**
+       * Default value used when `position` property is not set.
+       * @protected
+       */
+      _position: {
+        type: String,
+        value: 'bottom',
+      },
+
+      /** @private */
+      __effectivePosition: {
+        type: String,
+        computed: '__computePosition(position, _position)',
+      },
+
       /** @protected */
       _overlayElement: Object,
 
@@ -233,11 +418,16 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
         type: Boolean,
         value: false,
       },
+
+      /** @private */
+      _isConnected: {
+        type: Boolean,
+      },
     };
   }
 
   static get observers() {
-    return ['__textGeneratorChanged(_overlayElement, textGenerator, context)'];
+    return ['__generatorChanged(_overlayElement, generator, context)'];
   }
 
   /**
@@ -289,14 +479,15 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
       },
       { threshold: 1 },
     );
+
+    this._stateController = new TooltipStateController(this);
   }
 
   /** @protected */
-  ready() {
-    super.ready();
+  connectedCallback() {
+    super.connectedCallback();
 
-    this._overlayElement = this.shadowRoot.querySelector('vaadin-tooltip-overlay');
-    this._overlayElement.owner = this;
+    this._isConnected = true;
   }
 
   /** @protected */
@@ -304,8 +495,9 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
     super.disconnectedCallback();
 
     if (this._autoOpened) {
-      this._close(true);
+      this._stateController.close(true);
     }
+    this._isConnected = false;
   }
 
   /** @private */
@@ -329,13 +521,18 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
   }
 
   /** @private */
-  __computeOpened(manual, opened, autoOpened) {
-    return manual ? opened : autoOpened;
+  __computeOpened(manual, opened, autoOpened, connected) {
+    return connected && (manual ? opened : autoOpened);
+  }
+
+  /** @private */
+  __computePosition(position, defaultPosition) {
+    return position || defaultPosition;
   }
 
   /** @private */
   __tooltipRenderer(root) {
-    root.textContent = typeof this.textGenerator === 'function' ? this.textGenerator(this.context) : this.text;
+    root.textContent = typeof this.generator === 'function' ? this.generator(this.context) : this.text;
   }
 
   /** @private */
@@ -381,7 +578,10 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
       target.addEventListener('focusout', this.__onFocusout);
       target.addEventListener('mousedown', this.__onMouseDown);
 
-      this.__targetVisibilityObserver.observe(target);
+      // Wait before observing to avoid Chrome issue.
+      requestAnimationFrame(() => {
+        this.__targetVisibilityObserver.observe(target);
+      });
 
       addValueToAttribute(target, 'aria-describedby', this._uniqueId);
     }
@@ -389,6 +589,10 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
 
   /** @private */
   __onFocusin(event) {
+    if (this.manual) {
+      return;
+    }
+
     // Only open on keyboard focus.
     if (!isKeyboardActive()) {
       return;
@@ -399,19 +603,23 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
       return;
     }
 
-    if (typeof this.shouldShow === 'function' && this.shouldShow(this.target) !== true) {
+    if (!this.__isShouldShow()) {
       return;
     }
 
     this.__focusInside = true;
 
     if (!this.__isTargetHidden && (!this.__hoverInside || !this._autoOpened)) {
-      this._open({ focus: true });
+      this._stateController.open({ focus: true });
     }
   }
 
   /** @private */
   __onFocusout(event) {
+    if (this.manual) {
+      return;
+    }
+
     // Do not close when moving focus within a component.
     if (this.target.contains(event.relatedTarget)) {
       return;
@@ -420,7 +628,7 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
     this.__focusInside = false;
 
     if (!this.__hoverInside) {
-      this._close(true);
+      this._stateController.close(true);
     }
   }
 
@@ -428,18 +636,22 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
   __onKeyDown(event) {
     if (event.key === 'Escape') {
       event.stopPropagation();
-      this._close(true);
+      this._stateController.close(true);
     }
   }
 
   /** @private */
   __onMouseDown() {
-    this._close(true);
+    this._stateController.close(true);
   }
 
   /** @private */
   __onMouseEnter() {
-    if (typeof this.shouldShow === 'function' && this.shouldShow(this.target) !== true) {
+    if (this.manual) {
+      return;
+    }
+
+    if (!this.__isShouldShow()) {
       return;
     }
 
@@ -451,16 +663,34 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
     this.__hoverInside = true;
 
     if (!this.__isTargetHidden && (!this.__focusInside || !this._autoOpened)) {
-      this._open({ hover: true });
+      this._stateController.open({ hover: true });
+    }
+  }
+
+  /** @private */
+  __onMouseLeave(event) {
+    if (event.relatedTarget !== this._overlayElement) {
+      this.__handleMouseLeave();
     }
   }
 
   /** @private */
-  __onMouseLeave() {
+  __onOverlayMouseLeave(event) {
+    if (event.relatedTarget !== this.target) {
+      this.__handleMouseLeave();
+    }
+  }
+
+  /** @private */
+  __handleMouseLeave() {
+    if (this.manual) {
+      return;
+    }
+
     this.__hoverInside = false;
 
     if (!this.__focusInside) {
-      this._close();
+      this._stateController.close();
     }
   }
 
@@ -471,157 +701,23 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
 
     // Open the overlay when the target becomes visible and has focus or hover.
     if (oldHidden && isVisible && (this.__focusInside || this.__hoverInside)) {
-      this._open(true);
+      this._stateController.open({ immediate: true });
       return;
     }
 
     // Close the overlay when the target is no longer fully visible.
     if (!isVisible && this._autoOpened) {
-      this._close(true);
-    }
-  }
-
-  /**
-   * Schedule opening the tooltip.
-   * @param {boolean} immediate
-   * @protected
-   */
-  _open(options = { immediate: false }) {
-    const { immediate, hover, focus } = options;
-    const isHover = hover && this.__getHoverDelay() > 0;
-    const isFocus = focus && this.__getFocusDelay() > 0;
-
-    if (!immediate && (isHover || isFocus) && !this.__closeTimeout) {
-      this.__warmupTooltip(isFocus);
-    } else {
-      this.__showTooltip();
-    }
-  }
-
-  /**
-   * Schedule closing the tooltip.
-   * @param {boolean} immediate
-   * @protected
-   */
-  _close(immediate) {
-    if (!immediate && this.__getHideDelay() > 0) {
-      this.__scheduleClose();
-    } else {
-      this.__abortClose();
-      this._autoOpened = false;
-    }
-
-    this.__abortWarmUp();
-
-    if (warmedUp) {
-      // Re-start cooldown timer on each tooltip closing.
-      this.__abortCooldown();
-      this.__scheduleCooldown();
+      this._stateController.close(true);
     }
   }
 
   /** @private */
-  __getFocusDelay() {
-    return this.focusDelay != null && this.focusDelay > 0 ? this.focusDelay : defaultFocusDelay;
-  }
-
-  /** @private */
-  __getHoverDelay() {
-    return this.hoverDelay != null && this.hoverDelay > 0 ? this.hoverDelay : defaultHoverDelay;
-  }
-
-  /** @private */
-  __getHideDelay() {
-    return this.hideDelay != null && this.hideDelay > 0 ? this.hideDelay : defaultHideDelay;
-  }
-
-  /** @private */
-  __flushClosingTooltips() {
-    closing.forEach((tooltip) => {
-      tooltip._close(true);
-      closing.delete(tooltip);
-    });
-  }
-
-  /** @private */
-  __showTooltip() {
-    this.__abortClose();
-    this.__flushClosingTooltips();
-
-    this._autoOpened = true;
-    warmedUp = true;
-
-    // Abort previously scheduled timers.
-    this.__abortWarmUp();
-    this.__abortCooldown();
-  }
-
-  /** @private */
-  __warmupTooltip(isFocus) {
-    if (!this._autoOpened) {
-      // First tooltip is opened, warm up.
-      if (!warmedUp) {
-        this.__scheduleWarmUp(isFocus);
-      } else {
-        // Warmed up, show another tooltip.
-        this.__showTooltip();
-      }
-    }
-  }
-
-  /** @private */
-  __abortClose() {
-    if (this.__closeTimeout) {
-      clearTimeout(this.__closeTimeout);
-      this.__closeTimeout = null;
+  __isShouldShow() {
+    if (typeof this.shouldShow === 'function' && this.shouldShow(this.target, this.context) !== true) {
+      return false;
     }
-  }
 
-  /** @private */
-  __abortCooldown() {
-    if (cooldownTimeout) {
-      clearTimeout(cooldownTimeout);
-      cooldownTimeout = null;
-    }
-  }
-
-  /** @private */
-  __abortWarmUp() {
-    if (warmUpTimeout) {
-      clearTimeout(warmUpTimeout);
-      warmUpTimeout = null;
-    }
-  }
-
-  /** @private */
-  __scheduleClose() {
-    if (this._autoOpened) {
-      closing.add(this);
-
-      this.__closeTimeout = setTimeout(() => {
-        closing.delete(this);
-        this.__closeTimeout = null;
-        this._autoOpened = false;
-      }, this.__getHideDelay());
-    }
-  }
-
-  /** @private */
-  __scheduleCooldown() {
-    cooldownTimeout = setTimeout(() => {
-      cooldownTimeout = null;
-      warmedUp = false;
-    }, this.__getHideDelay());
-  }
-
-  /** @private */
-  __scheduleWarmUp(isFocus) {
-    const delay = isFocus ? this.__getFocusDelay() : this.__getHoverDelay();
-    warmUpTimeout = setTimeout(() => {
-      warmUpTimeout = null;
-      warmedUp = true;
-      this.__showTooltip();
-    }, delay);
+    return true;
   }
 
   /** @private */
@@ -632,13 +728,13 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
   }
 
   /** @private */
-  __textGeneratorChanged(overlayElement, textGenerator, context) {
+  __generatorChanged(overlayElement, generator, context) {
     if (overlayElement) {
-      if (textGenerator !== this.__oldTextGenerator || context !== this.__oldContext) {
+      if (generator !== this.__oldTextGenerator || context !== this.__oldContext) {
         overlayElement.requestContentUpdate();
       }
 
-      this.__oldTextGenerator = textGenerator;
+      this.__oldTextGenerator = generator;
       this.__oldContext = context;
     }
   }

package/theme/lumo/vaadin-tooltip-styles.js

@@ -12,8 +12,8 @@ const tooltipOverlay = css`
   }
 
   [part='overlay'] {
-    background-color: var(--lumo-contrast);
-    color: var(--lumo-primary-contrast-color);
+    background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
+    color: var(--lumo-body-text-color);
     font-size: var(--lumo-font-size-xs);
   }
 

package/web-types.json

@@ -1,18 +1,18 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tooltip",
-  "version": "23.3.0-alpha1",
+  "version": "23.3.0-alpha3",
   "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/23.3.0-alpha1/#/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/custom-theme/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/23.3.0-alpha3/#/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/custom-theme/styling-components) documentation.",
           "attributes": [
             {
               "name": "focus-delay",
-              "description": "The delay in milliseconds before the tooltip\nis opened on focus, when not in manual mode.",
+              "description": "The delay in milliseconds before the tooltip\nis opened on keyboard focus, when not in manual mode.",
               "value": {
                 "type": [
                   "number",
@@ -114,7 +114,7 @@
             "properties": [
               {
                 "name": "context",
-                "description": "Object with properties passed to `textGenerator`\nfunction to be used for generating tooltip text.",
+                "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": [
                     "Object",
@@ -125,7 +125,7 @@
               },
               {
                 "name": "focusDelay",
-                "description": "The delay in milliseconds before the tooltip\nis opened on focus, when not in manual mode.",
+                "description": "The delay in milliseconds before the tooltip\nis opened on keyboard focus, when not in manual mode.",
                 "value": {
                   "type": [
                     "number",
@@ -202,7 +202,7 @@
               },
               {
                 "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 accepts a reference to the target element as a parameter.\nThe tooltip is only shown when the function invocation returns `true`.",
+                "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": {
                   "type": [
                     "Object",
@@ -234,7 +234,7 @@
                 }
               },
               {
-                "name": "textGenerator",
+                "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": {
                   "type": [

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tooltip",
-  "version": "23.3.0-alpha1",
+  "version": "23.3.0-alpha3",
   "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/23.3.0-alpha1/#/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/custom-theme/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/23.3.0-alpha3/#/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/custom-theme/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -35,14 +35,14 @@
             },
             {
               "name": ".context",
-              "description": "Object with properties passed to `textGenerator`\nfunction to be used for generating tooltip text.",
+              "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": ".focusDelay",
-              "description": "The delay in milliseconds before the tooltip\nis opened on focus, when not in manual mode.",
+              "description": "The delay in milliseconds before the tooltip\nis opened on keyboard focus, when not in manual mode.",
               "value": {
                 "kind": "expression"
               }
@@ -77,7 +77,7 @@
             },
             {
               "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 accepts a reference to the target element as a parameter.\nThe tooltip is only shown when the function invocation returns `true`.",
+              "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"
               }
@@ -97,7 +97,7 @@
               }
             },
             {
-              "name": ".textGenerator",
+              "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"