@vaadin/tooltip 24.2.0-dev.f254716fe → 24.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/tooltip",
-  "version": "24.2.0-dev.f254716fe",
+  "version": "24.2.0",
   "publishConfig": {
     "access": "public"
   },
@@ -35,21 +35,21 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.2.0-dev.f254716fe",
-    "@vaadin/component-base": "24.2.0-dev.f254716fe",
-    "@vaadin/overlay": "24.2.0-dev.f254716fe",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-dev.f254716fe",
-    "@vaadin/vaadin-material-styles": "24.2.0-dev.f254716fe",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-dev.f254716fe"
+    "@vaadin/a11y-base": "~24.2.0",
+    "@vaadin/component-base": "~24.2.0",
+    "@vaadin/overlay": "~24.2.0",
+    "@vaadin/vaadin-lumo-styles": "~24.2.0",
+    "@vaadin/vaadin-material-styles": "~24.2.0",
+    "@vaadin/vaadin-themable-mixin": "~24.2.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.3",
+    "@vaadin/testing-helpers": "^0.5.0",
     "sinon": "^13.0.2"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "da54950b9f8c14c6451ede0d426e16a489c7fb9b"
+  "gitHead": "8b9e860d53fc0132d05d3e8701eeded2dca74eba"
 }

package/src/vaadin-tooltip-overlay.js

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 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 { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
 import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
@@ -53,6 +54,7 @@ registerStyles('vaadin-tooltip-overlay', [overlayStyles, tooltipOverlayStyles],
 /**
  * An element used internally by `<vaadin-tooltip>`. Not intended to be used separately.
  *
+ * @customElement
  * @extends HTMLElement
  * @mixes DirMixin
  * @mixes OverlayMixin
@@ -155,4 +157,4 @@ class TooltipOverlay extends PositionMixin(OverlayMixin(DirMixin(ThemableMixin(P
   }
 }
 
-customElements.define(TooltipOverlay.is, TooltipOverlay);
+defineCustomElement(TooltipOverlay);

package/src/vaadin-tooltip.d.ts

@@ -3,6 +3,7 @@
  * Copyright (c) 2022 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
@@ -59,7 +60,7 @@ export type TooltipPosition =
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  */
-declare class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(HTMLElement))) {
+declare class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ControllerMixin(ElementMixin(HTMLElement)))) {
   /**
    * Sets the default focus delay to be used by all tooltip instances,
    * except for those that have focus delay configured using property.
@@ -78,6 +79,13 @@ declare class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(
    */
   static setDefaultHoverDelay(delay: number): void;
 
+  /**
+   * Element used to link with the `aria-describedby`
+   * attribute. Supports array of multiple elements.
+   * When not set, defaults to `target`.
+   */
+  ariaTarget: HTMLElement | HTMLElement[] | undefined;
+
   /**
    * Object with properties passed to `generator` and
    * `shouldShow` functions for generating tooltip text

package/src/vaadin-tooltip.js

@@ -7,10 +7,13 @@ import './vaadin-tooltip-overlay.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
 import { microTask } from '@vaadin/component-base/src/async.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.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 { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 
@@ -69,6 +72,14 @@ class TooltipStateController {
     return tooltip.hideDelay != null && tooltip.hideDelay > 0 ? tooltip.hideDelay : defaultHideDelay;
   }
 
+  /**
+   * Whether closing is currently in progress.
+   * @return {boolean}
+   */
+  get isClosing() {
+    return closing.has(this.host);
+  }
+
   /**
    * Schedule opening the tooltip.
    * @param {Object} options
@@ -244,12 +255,14 @@ class TooltipStateController {
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
+ * @customElement
  * @extends HTMLElement
+ * @mixes ControllerMixin
  * @mixes ElementMixin
  * @mixes OverlayClassMixin
  * @mixes ThemePropertyMixin
  */
-class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolymerElement))) {
+class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(ControllerMixin(PolymerElement)))) {
   static get is() {
     return 'vaadin-tooltip';
   }
@@ -262,8 +275,6 @@ class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolymerE
         }
       </style>
       <vaadin-tooltip-overlay
-        id="[[_uniqueId]]"
-        role="tooltip"
         renderer="[[_renderer]]"
         theme$="[[_theme]]"
         opened="[[__computeOpened(manual, opened, _autoOpened, _isConnected)]]"
@@ -273,14 +284,26 @@ class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolymerE
         no-vertical-overlap$="[[__computeNoVerticalOverlap(__effectivePosition)]]"
         horizontal-align="[[__computeHorizontalAlign(__effectivePosition)]]"
         vertical-align="[[__computeVerticalAlign(__effectivePosition)]]"
+        on-mouseenter="__onOverlayMouseEnter"
         on-mouseleave="__onOverlayMouseLeave"
         modeless
       ></vaadin-tooltip-overlay>
+
+      <slot name="sr-label"></slot>
     `;
   }
 
   static get properties() {
     return {
+      /**
+       * Element used to link with the `aria-describedby`
+       * attribute. Supports array of multiple elements.
+       * When not set, defaults to `target`.
+       */
+      ariaTarget: {
+        type: Object,
+      },
+
       /**
        * Object with properties passed to `generator` and
        * `shouldShow` functions for generating tooltip text
@@ -420,6 +443,17 @@ class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolymerE
         value: 'bottom',
       },
 
+      /**
+       * Element used to link with the `aria-describedby`
+       * attribute. When not set, defaults to `target`.
+       * @protected
+       */
+      _effectiveAriaTarget: {
+        type: Object,
+        computed: '__computeAriaTarget(ariaTarget, target)',
+        observer: '__effectiveAriaTargetChanged',
+      },
+
       /** @private */
       __effectivePosition: {
         type: String,
@@ -436,11 +470,24 @@ class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolymerE
       _isConnected: {
         type: Boolean,
       },
+
+      /** @private */
+      _srLabel: {
+        type: Object,
+      },
+
+      /** @private */
+      _overlayContent: {
+        type: String,
+      },
     };
   }
 
   static get observers() {
-    return ['__generatorChanged(_overlayElement, generator, context)'];
+    return [
+      '__generatorChanged(_overlayElement, generator, context)',
+      '__updateSrLabelText(_srLabel, _overlayContent)',
+    ];
   }
 
   /**
@@ -518,6 +565,27 @@ class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolymerE
     document.body.removeEventListener('vaadin-overlay-open', this.__onOverlayOpen);
   }
 
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this._srLabelController = new SlotController(this, 'sr-label', 'div', {
+      initializer: (element) => {
+        element.id = this._uniqueId;
+        element.setAttribute('role', 'tooltip');
+        this._srLabel = element;
+      },
+    });
+    this.addController(this._srLabelController);
+  }
+
+  /** @private */
+  __computeAriaTarget(ariaTarget, target) {
+    const isElementNode = (el) => el && el.nodeType === Node.ELEMENT_NODE;
+    const isAriaTargetSet = Array.isArray(ariaTarget) ? ariaTarget.some(isElementNode) : ariaTarget;
+    return isAriaTargetSet ? ariaTarget : target;
+  }
+
   /** @private */
   __computeHorizontalAlign(position) {
     return ['top-end', 'bottom-end', 'start-top', 'start', 'start-bottom'].includes(position) ? 'end' : 'start';
@@ -551,6 +619,24 @@ class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolymerE
   /** @private */
   __tooltipRenderer(root) {
     root.textContent = typeof this.generator === 'function' ? this.generator(this.context) : this.text;
+
+    // Update the sr-only label text content
+    this._overlayContent = root.textContent;
+  }
+
+  /** @private */
+  __effectiveAriaTargetChanged(ariaTarget, oldAriaTarget) {
+    if (oldAriaTarget) {
+      [oldAriaTarget].flat().forEach((target) => {
+        removeValueFromAttribute(target, 'aria-describedby', this._uniqueId);
+      });
+    }
+
+    if (ariaTarget) {
+      [ariaTarget].flat().forEach((target) => {
+        addValueToAttribute(target, 'aria-describedby', this._uniqueId);
+      });
+    }
   }
 
   /** @private */
@@ -596,8 +682,6 @@ class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolymerE
       oldTarget.removeEventListener('mousedown', this.__onMouseDown);
 
       this.__targetVisibilityObserver.unobserve(oldTarget);
-
-      removeValueFromAttribute(oldTarget, 'aria-describedby', this._uniqueId);
     }
 
     if (target) {
@@ -611,8 +695,6 @@ class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolymerE
       requestAnimationFrame(() => {
         this.__targetVisibilityObserver.observe(target);
       });
-
-      addValueToAttribute(target, 'aria-describedby', this._uniqueId);
     }
   }
 
@@ -703,6 +785,17 @@ class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolymerE
     }
   }
 
+  /** @private */
+  __onOverlayMouseEnter() {
+    // Retain opened state when moving pointer over the overlay.
+    // Closing can start due to an offset between the target and
+    // the overlay itself. If that's the case, re-open overlay.
+    // See https://github.com/vaadin/web-components/issues/6316
+    if (this._stateController.isClosing) {
+      this._stateController.open({ immediate: true });
+    }
+  }
+
   /** @private */
   __onOverlayMouseLeave(event) {
     if (event.relatedTarget !== this.target) {
@@ -779,8 +872,15 @@ class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolymerE
       this.__oldContext = context;
     }
   }
+
+  /** @private */
+  __updateSrLabelText(srLabel, textContent) {
+    if (srLabel) {
+      srLabel.textContent = textContent;
+    }
+  }
 }
 
-customElements.define(Tooltip.is, Tooltip);
+defineCustomElement(Tooltip);
 
 export { Tooltip };

package/web-types.json

@@ -0,0 +1,287 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@vaadin/tooltip",
+  "version": "24.2.0",
+  "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.2.0/#/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",
+              "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "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": "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.",
+              "value": {
+                "type": [
+                  "string",
+                  "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.",
+              "value": {
+                "type": [
+                  "number",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "hover-delay",
+              "description": "The delay in milliseconds before the tooltip\nis opened on hover, when not in manual mode.",
+              "value": {
+                "type": [
+                  "number",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "manual",
+              "description": "When true, the tooltip is controlled programmatically\ninstead of reacting to focus and mouse events.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "opened",
+              "description": "When true, the tooltip is opened programmatically.\nOnly works if `manual` is set to `true`.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "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.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "theme",
+              "description": "The theme variants to apply to the component.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "overlayClass",
+                "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "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",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "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": [
+                    "Object",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "focusDelay",
+                "description": "The delay in milliseconds before the tooltip\nis opened on keyboard focus, when not in manual mode.",
+                "value": {
+                  "type": [
+                    "number",
+                    "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.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "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": {
+                  "type": [
+                    "number",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "hoverDelay",
+                "description": "The delay in milliseconds before the tooltip\nis opened on hover, when not in manual mode.",
+                "value": {
+                  "type": [
+                    "number",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "manual",
+                "description": "When true, the tooltip is controlled programmatically\ninstead of reacting to focus and mouse events.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "opened",
+                "description": "When true, the tooltip is opened programmatically.\nOnly works if `manual` is set to `true`.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "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`.",
+                "value": {
+                  "type": [
+                    "Object",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "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.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "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": [
+                    "Object",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              }
+            ],
+            "events": []
+          }
+        }
+      ]
+    }
+  }
+}

package/web-types.lit.json

@@ -0,0 +1,125 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@vaadin/tooltip",
+  "version": "24.2.0",
+  "description-markup": "markdown",
+  "framework": "lit",
+  "framework-config": {
+    "enable-when": {
+      "node-packages": [
+        "lit"
+      ]
+    }
+  },
+  "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.2.0/#/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": [
+            {
+              "name": "?manual",
+              "description": "When true, the tooltip is controlled programmatically\ninstead of reacting to focus and mouse events.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "?opened",
+              "description": "When true, the tooltip is opened programmatically.\nOnly works if `manual` is set to `true`.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".overlayClass",
+              "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "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": ".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": ".focusDelay",
+              "description": "The delay in milliseconds before the tooltip\nis opened on keyboard focus, when not in manual mode.",
+              "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.",
+              "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.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".hoverDelay",
+              "description": "The delay in milliseconds before the tooltip\nis opened on hover, when not in manual mode.",
+              "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`.",
+              "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`.",
+              "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`.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".text",
+              "description": "String used as a tooltip content.",
+              "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.",
+              "value": {
+                "kind": "expression"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  }
+}