@vaadin/tooltip 25.0.0-alpha2 → 25.0.0-alpha21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/tooltip",
-  "version": "25.0.0-alpha2",
+  "version": "25.0.0-alpha21",
   "publishConfig": {
     "access": "public"
   },
@@ -21,7 +21,6 @@
   "type": "module",
   "files": [
     "src",
-    "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
@@ -35,23 +34,24 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha2",
-    "@vaadin/component-base": "25.0.0-alpha2",
-    "@vaadin/overlay": "25.0.0-alpha2",
-    "@vaadin/popover": "25.0.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha2",
+    "@vaadin/a11y-base": "25.0.0-alpha21",
+    "@vaadin/component-base": "25.0.0-alpha21",
+    "@vaadin/markdown": "25.0.0-alpha21",
+    "@vaadin/overlay": "25.0.0-alpha21",
+    "@vaadin/popover": "25.0.0-alpha21",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha21",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha2",
-    "@vaadin/test-runner-commands": "25.0.0-alpha2",
+    "@vaadin/chai-plugins": "25.0.0-alpha21",
+    "@vaadin/test-runner-commands": "25.0.0-alpha21",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^18.0.0"
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha21",
+    "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "67ffcd5355cf21ce1b5039c598525109fc4c164b"
+  "gitHead": "8fb9e9710c01449edf623a1aaac4655cdc11a933"
 }

package/src/styles/vaadin-tooltip-overlay-base-styles.js

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright (c) 2022 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/component-base/src/styles/style-props.js';
+import { css } from 'lit';
+
+export const tooltipOverlayStyles = css`
+  :host {
+    --_vaadin-tooltip-default-offset: 4px;
+    line-height: normal;
+  }
+
+  [part='overlay'] {
+    max-width: var(--vaadin-tooltip-max-width, 40ch);
+    padding: var(--vaadin-tooltip-padding, var(--vaadin-padding-container));
+    border-radius: var(--vaadin-tooltip-border-radius, var(--vaadin-radius-m));
+    background: var(--vaadin-tooltip-background, var(--vaadin-background-color));
+    color: var(--vaadin-tooltip-color, inherit);
+    font-size: var(--vaadin-tooltip-font-size, 0.9em);
+    font-weight: var(--vaadin-tooltip-font-weight, inherit);
+    line-height: var(--vaadin-tooltip-line-height, inherit);
+    border: 0;
+    box-shadow:
+      0 0 0 var(--vaadin-tooltip-border-width, 1px)
+        var(--vaadin-tooltip-border-color, var(--vaadin-border-color-secondary)),
+      var(--vaadin-tooltip-shadow, 0 3px 8px -1px rgba(0, 0, 0, 0.2));
+  }
+
+  :host(:not([markdown])) [part='content'] {
+    white-space: pre-wrap;
+  }
+
+  :host([position^='top'][top-aligned]) [part='overlay'],
+  :host([position^='bottom'][top-aligned]) [part='overlay'] {
+    margin-top: var(--vaadin-tooltip-offset-top, var(--_vaadin-tooltip-default-offset));
+  }
+
+  :host([position^='top'][bottom-aligned]) [part='overlay'],
+  :host([position^='bottom'][bottom-aligned]) [part='overlay'] {
+    margin-bottom: var(--vaadin-tooltip-offset-bottom, var(--_vaadin-tooltip-default-offset));
+  }
+
+  :host([position^='start'][start-aligned]) [part='overlay'],
+  :host([position^='end'][start-aligned]) [part='overlay'] {
+    margin-inline-start: var(--vaadin-tooltip-offset-start, var(--_vaadin-tooltip-default-offset));
+  }
+
+  :host([position^='start'][end-aligned]) [part='overlay'],
+  :host([position^='end'][end-aligned]) [part='overlay'] {
+    margin-inline-end: var(--vaadin-tooltip-offset-end, var(--_vaadin-tooltip-default-offset));
+  }
+
+  @media (forced-colors: active) {
+    [part='overlay'] {
+      border: 1px dashed !important;
+    }
+  }
+`;

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

@@ -4,7 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 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';
 
@@ -15,11 +14,7 @@ export type { PopoverPosition as TooltipPosition } from '@vaadin/popover/src/vaa
  */
 export declare function TooltipMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<OverlayClassMixinClass> &
-  Constructor<PopoverPositionMixinClass> &
-  Constructor<PopoverTargetMixinClass> &
-  Constructor<TooltipMixinClass> &
-  T;
+): Constructor<PopoverPositionMixinClass> & Constructor<PopoverTargetMixinClass> & Constructor<TooltipMixinClass> & T;
 
 export declare class TooltipMixinClass {
   /**
@@ -27,7 +22,7 @@ export declare class TooltipMixinClass {
    * attribute. Supports array of multiple elements.
    * When not set, defaults to `target`.
    */
-  ariaTarget: HTMLElement | HTMLElement[] | undefined;
+  ariaTarget: HTMLElement | HTMLElement[] | null | undefined;
 
   /**
    * Object with properties passed to `generator` and
@@ -73,8 +68,9 @@ export declare class TooltipMixinClass {
   manual: boolean;
 
   /**
-   * When true, the tooltip is opened programmatically.
-   * Only works if `manual` is set to `true`.
+   * When true, the tooltip is opened.
+   * In manual mode, this can be set programmatically.
+   * In automatic mode, this is set automatically by internal logic.
    */
   opened: boolean;
 
@@ -91,4 +87,13 @@ export declare class TooltipMixinClass {
    * String used as a tooltip content.
    */
   text: string | null | undefined;
+
+  /**
+   * When enabled, the tooltip text is rendered as Markdown.
+   *
+   * **Note:** Using Markdown is discouraged if accessibility of the tooltip
+   * content is essential, as semantics of the rendered HTML content
+   * (headers, lists, ...) will not be conveyed to assistive technologies.
+   */
+  markdown: boolean;
 }

package/src/vaadin-tooltip-mixin.js

@@ -5,7 +5,6 @@
  */
 import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.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';
@@ -45,11 +44,6 @@ class TooltipStateController {
     this.host = host;
   }
 
-  /** @private */
-  get openedProp() {
-    return this.host.manual ? 'opened' : '_autoOpened';
-  }
-
   /** @private */
   get focusDelay() {
     const tooltip = this.host;
@@ -115,12 +109,12 @@ class TooltipStateController {
 
   /** @private */
   _isOpened() {
-    return this.host[this.openedProp];
+    return this.host.opened;
   }
 
   /** @private */
   _setOpened(opened) {
-    this.host[this.openedProp] = opened;
+    this.host.opened = opened;
   }
 
   /** @private */
@@ -224,12 +218,11 @@ class TooltipStateController {
  * A mixin providing common tooltip functionality.
  *
  * @polymerMixin
- * @mixes OverlayClassMixin
  * @mixes PopoverPositionMixin
  * @mixes PopoverTargetMixin
  */
 export const TooltipMixin = (superClass) =>
-  class TooltipMixinClass extends PopoverPositionMixin(PopoverTargetMixin(OverlayClassMixin(superClass))) {
+  class TooltipMixinClass extends PopoverPositionMixin(PopoverTargetMixin(superClass)) {
     static get properties() {
       return {
         /**
@@ -302,12 +295,15 @@ export const TooltipMixin = (superClass) =>
         },
 
         /**
-         * When true, the tooltip is opened programmatically.
-         * Only works if `manual` is set to `true`.
+         * When true, the tooltip is opened.
+         * In manual mode, this can be set programmatically.
+         * In automatic mode, this is set automatically by internal logic.
          */
         opened: {
           type: Boolean,
           value: false,
+          reflectToAttribute: true,
+          observer: '__openedChanged',
           sync: true,
         },
 
@@ -330,18 +326,19 @@ export const TooltipMixin = (superClass) =>
          */
         text: {
           type: String,
-          observer: '__textChanged',
         },
 
         /**
-         * Set to true when the overlay is opened using auto-added
-         * event listeners: mouseenter and focusin (keyboard only).
-         * @protected
+         * When enabled, the tooltip text is rendered as Markdown.
+         *
+         * **Note:** Using Markdown is discouraged if accessibility of the tooltip
+         * content is essential, as semantics of the rendered HTML content
+         * (headers, lists, ...) will not be conveyed to assistive technologies.
          */
-        _autoOpened: {
+        markdown: {
           type: Boolean,
-          observer: '__autoOpenedChanged',
-          sync: true,
+          value: false,
+          reflectToAttribute: true,
         },
 
         /**
@@ -366,26 +363,9 @@ export const TooltipMixin = (superClass) =>
           type: Boolean,
           sync: true,
         },
-
-        /** @private */
-        _srLabel: {
-          type: Object,
-        },
-
-        /** @private */
-        _overlayContent: {
-          type: String,
-        },
       };
     }
 
-    static get observers() {
-      return [
-        '__generatorChanged(_overlayElement, generator, context)',
-        '__updateSrLabelText(_srLabel, _overlayContent)',
-      ];
-    }
-
     /**
      * Sets the default focus delay to be used by all tooltip instances,
      * except for those that have focus delay configured using property.
@@ -420,7 +400,6 @@ export const TooltipMixin = (superClass) =>
       super();
 
       this._uniqueId = `vaadin-tooltip-${generateUniqueId()}`;
-      this._renderer = this.__tooltipRenderer.bind(this);
 
       this.__onFocusin = this.__onFocusin.bind(this);
       this.__onFocusout = this.__onFocusout.bind(this);
@@ -453,7 +432,7 @@ export const TooltipMixin = (superClass) =>
     disconnectedCallback() {
       super.disconnectedCallback();
 
-      if (this._autoOpened) {
+      if (this.opened && !this.manual) {
         this._stateController.close(true);
       }
       this._isConnected = false;
@@ -467,23 +446,27 @@ export const TooltipMixin = (superClass) =>
 
       this._overlayElement = this.$.overlay;
 
-      this._srLabelController = new SlotController(this, 'sr-label', 'div', {
+      this.__contentController = new SlotController(this, 'overlay', 'div', {
         initializer: (element) => {
           element.id = this._uniqueId;
           element.setAttribute('role', 'tooltip');
-          this._srLabel = element;
+          this.__contentNode = element;
         },
       });
-      this.addController(this._srLabelController);
+      this.addController(this.__contentController);
     }
 
-    /** @private */
-    __computeOpened(manual, opened, autoOpened, connected) {
-      return connected && (manual ? opened : autoOpened);
+    /** @protected */
+    updated(props) {
+      super.updated(props);
+
+      if (props.has('text') || props.has('generator') || props.has('context') || props.has('markdown')) {
+        this.__updateContent();
+      }
     }
 
     /** @private */
-    __autoOpenedChanged(opened, oldOpened) {
+    __openedChanged(opened, oldOpened) {
       if (opened) {
         document.addEventListener('keydown', this.__onKeyDown, true);
       } else if (oldOpened) {
@@ -546,7 +529,7 @@ export const TooltipMixin = (superClass) =>
 
       this.__focusInside = true;
 
-      if (!this.__isTargetHidden && (!this.__hoverInside || !this._autoOpened)) {
+      if (!this.__isTargetHidden && (!this.__hoverInside || !this.opened)) {
         this._stateController.open({ focus: true });
       }
     }
@@ -571,6 +554,10 @@ export const TooltipMixin = (superClass) =>
 
     /** @private */
     __onKeyDown(event) {
+      if (this.manual) {
+        return;
+      }
+
       if (event.key === 'Escape') {
         event.stopPropagation();
         this._stateController.close(true);
@@ -603,7 +590,7 @@ export const TooltipMixin = (superClass) =>
 
       this.__hoverInside = true;
 
-      if (!this.__isTargetHidden && (!this.__focusInside || !this._autoOpened)) {
+      if (!this.__isTargetHidden && (!this.__focusInside || !this.opened)) {
         this._stateController.open({ hover: true });
       }
     }
@@ -617,6 +604,9 @@ export const TooltipMixin = (superClass) =>
 
     /** @protected */
     __onOverlayMouseEnter() {
+      if (this.manual) {
+        return;
+      }
       // 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.
@@ -633,6 +623,20 @@ export const TooltipMixin = (superClass) =>
       }
     }
 
+    /** @protected */
+    __onOverlayMouseDown(event) {
+      // Prevent mousedown listeners from being called when
+      // the tooltip is slotted into the target element
+      event.stopPropagation();
+    }
+
+    /** @protected */
+    __onOverlayClick(event) {
+      // Prevent click listeners from being called when
+      // the tooltip is slotted into the target element
+      event.stopPropagation();
+    }
+
     /** @private */
     __handleMouseLeave() {
       if (this.manual) {
@@ -660,6 +664,10 @@ export const TooltipMixin = (superClass) =>
 
     /** @private */
     __onTargetVisibilityChange(isVisible) {
+      if (this.manual) {
+        return;
+      }
+
       const oldHidden = this.__isTargetHidden;
       this.__isTargetHidden = !isVisible;
 
@@ -670,7 +678,7 @@ export const TooltipMixin = (superClass) =>
       }
 
       // Close the overlay when the target is no longer fully visible.
-      if (!isVisible && this._autoOpened) {
+      if (!isVisible && this.opened) {
         this._stateController.close(true);
       }
     }
@@ -685,25 +693,25 @@ export const TooltipMixin = (superClass) =>
     }
 
     /** @private */
-    __textChanged(text, oldText) {
-      if (this._overlayElement && (text || oldText)) {
-        this._overlayElement.requestContentUpdate();
-      }
-    }
+    async __updateContent() {
+      const content = typeof this.generator === 'function' ? this.generator(this.context) : this.text;
 
-    /** @private */
-    __tooltipRenderer(root) {
-      root.textContent = typeof this.generator === 'function' ? this.generator(this.context) : this.text;
+      if (this.markdown && content) {
+        const helpers = await this.constructor.__importMarkdownHelpers();
+        helpers.renderMarkdownToElement(this.__contentNode, content);
+      } else {
+        this.__contentNode.textContent = content || '';
+      }
 
-      // Update the sr-only label text content
-      this._overlayContent = root.textContent;
+      this.$.overlay.toggleAttribute('hidden', this.__contentNode.textContent.trim() === '');
+      this.dispatchEvent(new CustomEvent('content-changed', { detail: { content: this.__contentNode.textContent } }));
     }
 
     /** @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;
+      return ariaTarget === null || isAriaTargetSet ? ariaTarget : target;
     }
 
     /** @private */
@@ -721,22 +729,17 @@ export const TooltipMixin = (superClass) =>
       }
     }
 
-    /** @private */
-    __generatorChanged(overlayElement, generator, context) {
-      if (overlayElement) {
-        if (generator !== this.__oldTextGenerator || context !== this.__oldContext) {
-          overlayElement.requestContentUpdate();
-        }
-
-        this.__oldTextGenerator = generator;
-        this.__oldContext = context;
+    /** @private **/
+    static __importMarkdownHelpers() {
+      if (!this.__markdownHelpers) {
+        this.__markdownHelpers = import('@vaadin/markdown/src/markdown-helpers.js');
       }
+      return this.__markdownHelpers;
     }
 
-    /** @private */
-    __updateSrLabelText(srLabel, textContent) {
-      if (srLabel) {
-        srLabel.textContent = textContent;
-      }
-    }
+    /**
+     * Fired when the tooltip text content is changed.
+     *
+     * @event content-changed
+     */
   };

package/src/vaadin-tooltip-overlay.js

@@ -7,10 +7,11 @@ import { html, LitElement } from 'lit';
 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 { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-base-styles.js';
 import { PopoverOverlayMixin } from '@vaadin/popover/src/vaadin-popover-overlay-mixin.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { tooltipOverlayStyles } from './vaadin-tooltip-overlay-styles.js';
+import { tooltipOverlayStyles } from './styles/vaadin-tooltip-overlay-base-styles.js';
 
 /**
  * An element used internally by `<vaadin-tooltip>`. Not intended to be used separately.
@@ -22,7 +23,9 @@ import { tooltipOverlayStyles } from './vaadin-tooltip-overlay-styles.js';
  * @mixes PopoverOverlayMixin
  * @private
  */
-class TooltipOverlay extends PopoverOverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class TooltipOverlay extends PopoverOverlayMixin(
+  DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
+) {
   static get is() {
     return 'vaadin-tooltip-overlay';
   }
@@ -31,30 +34,14 @@ class TooltipOverlay extends PopoverOverlayMixin(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`
-      <div id="backdrop" part="backdrop" hidden></div>
       <div part="overlay" id="overlay">
         <div part="content" id="content"><slot></slot></div>
       </div>
     `;
   }
-
-  requestContentUpdate() {
-    super.requestContentUpdate();
-
-    this.toggleAttribute('hidden', this.textContent.trim() === '');
-  }
 }
 
 defineCustomElement(TooltipOverlay);

package/src/vaadin-tooltip.d.ts

@@ -9,6 +9,17 @@ import { TooltipMixin } from './vaadin-tooltip-mixin.js';
 
 export { TooltipPosition } from './vaadin-tooltip-mixin.js';
 
+/**
+ * Fired when the tooltip text content is changed.
+ */
+export type TooltipContentChangedEvent = CustomEvent<{ content: string }>;
+
+export interface TooltipCustomEventMap {
+  'content-changed': TooltipContentChangedEvent;
+}
+
+export interface TooltipEventMap extends HTMLElementEventMap, TooltipCustomEventMap {}
+
 /**
  * `<vaadin-tooltip>` is a Web Component for creating tooltips.
  *
@@ -17,23 +28,35 @@ export { TooltipPosition } from './vaadin-tooltip-mixin.js';
  * <vaadin-tooltip text="Click to save changes" for="confirm"></vaadin-tooltip>
  * ```
  *
+ * ### Markdown Support
+ *
+ * The tooltip supports rendering Markdown content by setting the `markdown` property:
+ *
+ * ```html
+ * <button id="info">Info</button>
+ * <vaadin-tooltip
+ *   text="**Important:** Click to view *detailed* information"
+ *   markdown
+ *   for="info">
+ * </vaadin-tooltip>
+ * ```
+ *
  * ### Styling
  *
- * `<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal
- * themable component as the actual visible overlay.
+ * The following shadow DOM parts are available for styling:
  *
- * See [`<vaadin-overlay>`](#/elements/vaadin-overlay) documentation
- * for `<vaadin-tooltip-overlay>` parts.
+ * Part name   | Description
+ * ----------- | ---------------
+ * `overlay`   | The overlay element
+ * `content`   | The overlay content element
  *
  * The following state attributes are available for styling:
  *
  * Attribute        | Description
  * -----------------|----------------------------------------
+ * `markdown`       | Reflects the `markdown` property value.
  * `position`       | Reflects the `position` property value.
  *
- * Note: the `theme` attribute value set on `<vaadin-tooltip>` is
- * propagated to the internal `<vaadin-tooltip-overlay>` component.
- *
  * ### Custom CSS Properties
  *
  * The following custom CSS properties are available on the `<vaadin-tooltip>` element:
@@ -46,6 +69,8 @@ export { TooltipPosition } from './vaadin-tooltip-mixin.js';
  * `--vaadin-tooltip-offset-end`    | Used as an offset when the tooltip is aligned horizontally before the target
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ *
+ * @fires {CustomEvent} content-changed - Fired when the tooltip text content is changed.
  */
 declare class Tooltip extends TooltipMixin(ThemePropertyMixin(ElementMixin(HTMLElement))) {
   /**
@@ -65,6 +90,18 @@ declare class Tooltip extends TooltipMixin(ThemePropertyMixin(ElementMixin(HTMLE
    * except for those that have hover delay configured using property.
    */
   static setDefaultHoverDelay(hoverDelay: number): void;
+
+  addEventListener<K extends keyof TooltipEventMap>(
+    type: K,
+    listener: (this: Tooltip, ev: TooltipEventMap[K]) => void,
+    options?: AddEventListenerOptions | boolean,
+  ): void;
+
+  removeEventListener<K extends keyof TooltipEventMap>(
+    type: K,
+    listener: (this: Tooltip, ev: TooltipEventMap[K]) => void,
+    options?: EventListenerOptions | boolean,
+  ): void;
 }
 
 declare global {

package/src/vaadin-tooltip.js

@@ -20,23 +20,35 @@ import { TooltipMixin } from './vaadin-tooltip-mixin.js';
  * <vaadin-tooltip text="Click to save changes" for="confirm"></vaadin-tooltip>
  * ```
  *
+ * ### Markdown Support
+ *
+ * The tooltip supports rendering Markdown content by setting the `markdown` property:
+ *
+ * ```html
+ * <button id="info">Info</button>
+ * <vaadin-tooltip
+ *   text="**Important:** Click to view *detailed* information"
+ *   markdown
+ *   for="info">
+ * </vaadin-tooltip>
+ * ```
+ *
  * ### Styling
  *
- * `<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal
- * themable component as the actual visible overlay.
+ * The following shadow DOM parts are available for styling:
  *
- * See [`<vaadin-overlay>`](#/elements/vaadin-overlay) documentation
- * for `<vaadin-tooltip-overlay>` parts.
+ * Part name   | Description
+ * ----------- | ---------------
+ * `overlay`   | The overlay element
+ * `content`   | The overlay content element
  *
  * The following state attributes are available for styling:
  *
  * Attribute        | Description
  * -----------------|----------------------------------------
+ * `markdown`       | Reflects the `markdown` property value.
  * `position`       | Reflects the `position` property value.
  *
- * Note: the `theme` attribute value set on `<vaadin-tooltip>` is
- * propagated to the internal `<vaadin-tooltip-overlay>` component.
- *
  * ### Custom CSS Properties
  *
  * The following custom CSS properties are available on the `<vaadin-tooltip>` element:
@@ -50,6 +62,8 @@ import { TooltipMixin } from './vaadin-tooltip-mixin.js';
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
+ * @fires {CustomEvent} content-changed - Fired when the tooltip text content is changed.
+ *
  * @customElement
  * @extends HTMLElement
  * @mixes ElementMixin
@@ -64,7 +78,7 @@ class Tooltip extends TooltipMixin(ThemePropertyMixin(ElementMixin(PolylitMixin(
   static get styles() {
     return css`
       :host {
-        display: none;
+        display: contents;
       }
     `;
   }
@@ -76,22 +90,24 @@ class Tooltip extends TooltipMixin(ThemePropertyMixin(ElementMixin(PolylitMixin(
     return html`
       <vaadin-tooltip-overlay
         id="overlay"
-        .renderer="${this._renderer}"
         .owner="${this}"
         theme="${ifDefined(this._theme)}"
-        .opened="${this._isConnected && (this.manual ? this.opened : this._autoOpened)}"
+        .opened="${this._isConnected && this.opened}"
         .positionTarget="${this.target}"
         .position="${effectivePosition}"
         ?no-horizontal-overlap="${this.__computeNoHorizontalOverlap(effectivePosition)}"
         ?no-vertical-overlap="${this.__computeNoVerticalOverlap(effectivePosition)}"
         .horizontalAlign="${this.__computeHorizontalAlign(effectivePosition)}"
         .verticalAlign="${this.__computeVerticalAlign(effectivePosition)}"
+        @click="${this.__onOverlayClick}"
+        @mousedown="${this.__onOverlayMouseDown}"
         @mouseenter="${this.__onOverlayMouseEnter}"
         @mouseleave="${this.__onOverlayMouseLeave}"
         modeless
+        ?markdown="${this.markdown}"
+        exportparts="overlay, content"
+        ><slot name="overlay"></slot
       ></vaadin-tooltip-overlay>
-
-      <slot name="sr-label"></slot>
     `;
   }
 }

package/vaadin-tooltip.js

@@ -1,3 +1,3 @@
-import './theme/lumo/vaadin-tooltip.js';
+import './src/vaadin-tooltip.js';
 
 export * from './src/vaadin-tooltip.js';

package/web-types.json

@@ -1,26 +1,15 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tooltip",
-  "version": "25.0.0-alpha2",
+  "version": "25.0.0-alpha21",
   "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/25.0.0-alpha2/#/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### Markdown Support\n\nThe tooltip supports rendering Markdown content by setting the `markdown` property:\n\n```html\n<button id=\"info\">Info</button>\n<vaadin-tooltip\n  text=\"**Important:** Click to view *detailed* information\"\n  markdown\n  for=\"info\">\n</vaadin-tooltip>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name   | Description\n----------- | ---------------\n`overlay`   | The overlay element\n`content`   | The overlay content element\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|----------------------------------------\n`markdown`       | Reflects the `markdown` property value.\n`position`       | Reflects the `position` property value.\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": "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`.",
@@ -89,7 +78,7 @@
             },
             {
               "name": "opened",
-              "description": "When true, the tooltip is opened programmatically.\nOnly works if `manual` is set to `true`.",
+              "description": "When true, the tooltip is opened.\nIn manual mode, this can be set programmatically.\nIn automatic mode, this is set automatically by internal logic.",
               "value": {
                 "type": [
                   "boolean",
@@ -109,6 +98,17 @@
                 ]
               }
             },
+            {
+              "name": "markdown",
+              "description": "When enabled, the tooltip text is rendered as Markdown.\n\n**Note:** Using Markdown is discouraged if accessibility of the tooltip\ncontent is essential, as semantics of the rendered HTML content\n(headers, lists, ...) will not be conveyed to assistive technologies.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "theme",
               "description": "The theme variants to apply to the component.",
@@ -123,17 +123,6 @@
           ],
           "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": "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`.",
@@ -246,7 +235,7 @@
               },
               {
                 "name": "opened",
-                "description": "When true, the tooltip is opened programmatically.\nOnly works if `manual` is set to `true`.",
+                "description": "When true, the tooltip is opened.\nIn manual mode, this can be set programmatically.\nIn automatic mode, this is set automatically by internal logic.",
                 "value": {
                   "type": [
                     "boolean",
@@ -276,9 +265,25 @@
                     "undefined"
                   ]
                 }
+              },
+              {
+                "name": "markdown",
+                "description": "When enabled, the tooltip text is rendered as Markdown.\n\n**Note:** Using Markdown is discouraged if accessibility of the tooltip\ncontent is essential, as semantics of the rendered HTML content\n(headers, lists, ...) will not be conveyed to assistive technologies.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "content-changed",
+                "description": "Fired when the tooltip text content is changed."
+              }
+            ]
           }
         }
       ]

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tooltip",
-  "version": "25.0.0-alpha2",
+  "version": "25.0.0-alpha21",
   "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/25.0.0-alpha2/#/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### Markdown Support\n\nThe tooltip supports rendering Markdown content by setting the `markdown` property:\n\n```html\n<button id=\"info\">Info</button>\n<vaadin-tooltip\n  text=\"**Important:** Click to view *detailed* information\"\n  markdown\n  for=\"info\">\n</vaadin-tooltip>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name   | Description\n----------- | ---------------\n`overlay`   | The overlay element\n`content`   | The overlay content element\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|----------------------------------------\n`markdown`       | Reflects the `markdown` property value.\n`position`       | Reflects the `position` property value.\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": [
             {
@@ -28,14 +28,14 @@
             },
             {
               "name": "?opened",
-              "description": "When true, the tooltip is opened programmatically.\nOnly works if `manual` is set to `true`.",
+              "description": "When true, the tooltip is opened.\nIn manual mode, this can be set programmatically.\nIn automatic mode, this is set automatically by internal logic.",
               "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.",
+              "name": "?markdown",
+              "description": "When enabled, the tooltip text is rendered as Markdown.\n\n**Note:** Using Markdown is discouraged if accessibility of the tooltip\ncontent is essential, as semantics of the rendered HTML content\n(headers, lists, ...) will not be conveyed to assistive technologies.",
               "value": {
                 "kind": "expression"
               }
@@ -116,6 +116,13 @@
               "value": {
                 "kind": "expression"
               }
+            },
+            {
+              "name": "@content-changed",
+              "description": "Fired when the tooltip text content is changed.",
+              "value": {
+                "kind": "expression"
+              }
             }
           ]
         }

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

@@ -1,42 +0,0 @@
-/**
- * @license
- * Copyright (c) 2022 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-export const tooltipOverlayStyles = css`
-  [part='overlay'] {
-    max-width: 40ch;
-  }
-
-  [part='content'] {
-    white-space: pre-wrap;
-  }
-
-  :host([position^='top'][top-aligned]) [part='overlay'],
-  :host([position^='bottom'][top-aligned]) [part='overlay'] {
-    margin-top: var(--vaadin-tooltip-offset-top, 0);
-  }
-
-  :host([position^='top'][bottom-aligned]) [part='overlay'],
-  :host([position^='bottom'][bottom-aligned]) [part='overlay'] {
-    margin-bottom: var(--vaadin-tooltip-offset-bottom, 0);
-  }
-
-  :host([position^='start'][start-aligned]) [part='overlay'],
-  :host([position^='end'][start-aligned]) [part='overlay'] {
-    margin-inline-start: var(--vaadin-tooltip-offset-start, 0);
-  }
-
-  :host([position^='start'][end-aligned]) [part='overlay'],
-  :host([position^='end'][end-aligned]) [part='overlay'] {
-    margin-inline-end: var(--vaadin-tooltip-offset-end, 0);
-  }
-
-  @media (forced-colors: active) {
-    [part='overlay'] {
-      outline: 1px dashed;
-    }
-  }
-`;

package/theme/lumo/vaadin-tooltip-styles.d.ts

@@ -1,3 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';

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

@@ -1,27 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';
-import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const tooltipOverlay = css`
-  :host {
-    --vaadin-tooltip-offset-top: var(--lumo-space-xs);
-    --vaadin-tooltip-offset-bottom: var(--lumo-space-xs);
-    --vaadin-tooltip-offset-start: var(--lumo-space-xs);
-    --vaadin-tooltip-offset-end: var(--lumo-space-xs);
-  }
-
-  [part='overlay'] {
-    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);
-    line-height: var(--lumo-line-height-s);
-  }
-
-  [part='content'] {
-    padding: var(--lumo-space-xs) var(--lumo-space-s);
-  }
-`;
-
-registerStyles('vaadin-tooltip-overlay', [overlay, tooltipOverlay], { moduleId: 'lumo-tooltip-overlay' });

package/theme/lumo/vaadin-tooltip.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-tooltip-styles.js';
-import '../../src/vaadin-tooltip.js';

package/theme/lumo/vaadin-tooltip.js

@@ -1,2 +0,0 @@
-import './vaadin-tooltip-styles.js';
-import '../../src/vaadin-tooltip.js';