@xlabs-store/core 0.0.1

package/dist/collection/components/x-tooltip/x-tooltip.js

@@ -0,0 +1,1006 @@
+import { Host, h, } from "@stencil/core";
+import { PortalController } from "../x-portal";
+/**
+ * @component x-tooltip
+ * @description A simple text popup tip following Ant Design specification.
+ *
+ * @slot - The trigger element
+ *
+ * @example
+ * <x-tooltip tooltip-title="Prompt text">
+ *   <span>Tooltip will show on mouse enter.</span>
+ * </x-tooltip>
+ */
+export class XTooltip {
+    /**
+     * Host element reference for trigger and slot access.
+     */
+    el;
+    // ==================== Props ====================
+    /**
+     * The text shown in the tooltip.
+     * Use `tooltipTitle` to avoid conflict with native `title` attribute.
+     * @example
+     * <x-tooltip tooltip-title="Info"></x-tooltip>
+     */
+    tooltipTitle;
+    /**
+     * The position of the tooltip relative to the target.
+     * @default 'top'
+     * @example
+     * <x-tooltip placement="bottom"></x-tooltip>
+     */
+    placement = 'top';
+    /**
+     * Tooltip trigger mode.
+     * @default 'hover'
+     * @example
+     * <x-tooltip trigger="click"></x-tooltip>
+     */
+    trigger = 'hover';
+    /**
+     * Background color of the tooltip.
+     * @example
+     * <x-tooltip color="#333"></x-tooltip>
+     */
+    color;
+    /**
+     * Whether the floating tooltip card is visible or not (controlled mode).
+     * @example
+     * <x-tooltip open></x-tooltip>
+     */
+    open;
+    /**
+     * Whether the floating tooltip card is visible by default.
+     * @example
+     * <x-tooltip defaultOpen></x-tooltip>
+     */
+    defaultOpen = false;
+    /**
+     * Whether to show arrow.
+     * Can be a boolean or an object with `pointAtCenter` option.
+     * @default true
+     * @example
+     * <x-tooltip arrow={false}></x-tooltip>
+     */
+    arrow = true;
+    /**
+     * Delay in seconds before tooltip is shown on mouse enter.
+     * @default 0.1
+     * @example
+     * <x-tooltip mouseEnterDelay={0.5}></x-tooltip>
+     */
+    mouseEnterDelay = 0.1;
+    /**
+     * Delay in seconds before tooltip is hidden on mouse leave.
+     * @default 0.1
+     * @example
+     * <x-tooltip mouseLeaveDelay={0.5}></x-tooltip>
+     */
+    mouseLeaveDelay = 0.1;
+    /**
+     * Whether to destroy tooltip on hide.
+     * @default false
+     * @example
+     * <x-tooltip destroyTooltipOnHide></x-tooltip>
+     */
+    destroyTooltipOnHide = false;
+    /**
+     * Whether to adjust popup placement automatically when popup is off screen.
+     * @default true
+     * @example
+     * <x-tooltip autoAdjustOverflow={false}></x-tooltip>
+     */
+    autoAdjustOverflow = true;
+    /**
+     * Z-index of the tooltip.
+     * @example
+     * <x-tooltip zIndex={2000}></x-tooltip>
+     */
+    zIndex = 9999;
+    /**
+     * Custom class names for tooltip parts.
+     * @example
+     * <x-tooltip classNames={{ root: 'my-tooltip' }}></x-tooltip>
+     */
+    classNames;
+    /**
+     * Custom styles for tooltip parts.
+     * @example
+     * <x-tooltip styles={{ root: { background: '#000' } }}></x-tooltip>
+     */
+    styles;
+    // ==================== Events ====================
+    /**
+     * Callback executed when visibility of the tooltip card is changed.
+     * @example
+     * <x-tooltip onOpenChange={(ev) => console.log(ev.detail)}></x-tooltip>
+     */
+    openChange;
+    // ==================== State ====================
+    /**
+     * Internal visibility state.
+     */
+    visible = false;
+    // ==================== Private ====================
+    /**
+     * Portal instance for tooltip content.
+     */
+    portalInstance = null;
+    /**
+     * Timeout for delayed show.
+     */
+    showTimeout;
+    /**
+     * Timeout for delayed hide.
+     */
+    hideTimeout;
+    // ==================== Computed ====================
+    get isOpen() {
+        return this.open ?? this.visible;
+    }
+    // ==================== Lifecycle ====================
+    componentWillLoad() {
+        this.visible = this.open ?? this.defaultOpen ?? false;
+    }
+    componentDidLoad() {
+        this.addEventListeners();
+    }
+    componentDidRender() {
+        this.updatePortal();
+    }
+    disconnectedCallback() {
+        this.clearTimeouts();
+        this.removeEventListeners();
+        this.destroyPortal();
+    }
+    // ==================== Watchers ====================
+    handleOpenChange(newValue) {
+        if (newValue !== undefined) {
+            this.setVisible(newValue);
+        }
+    }
+    // ==================== Methods ====================
+    /**
+     * Show the tooltip programmatically.
+     * @returns Promise<void>
+     * @example
+     * await el.show()
+     */
+    async show() {
+        this.setVisible(true);
+    }
+    /**
+     * Hide the tooltip programmatically.
+     * @returns Promise<void>
+     * @example
+     * await el.hide()
+     */
+    async hide() {
+        this.setVisible(false);
+    }
+    // ==================== Private Methods ====================
+    /**
+     * Clear pending show/hide timeouts.
+     * @returns void
+     */
+    clearTimeouts() {
+        if (this.showTimeout) {
+            clearTimeout(this.showTimeout);
+            this.showTimeout = undefined;
+        }
+        if (this.hideTimeout) {
+            clearTimeout(this.hideTimeout);
+            this.hideTimeout = undefined;
+        }
+    }
+    /**
+     * Update internal visibility and emit openChange.
+     * @param visible - New visibility state.
+     * @returns void
+     */
+    setVisible(visible) {
+        if (this.visible === visible)
+            return;
+        this.visible = visible;
+        this.openChange.emit({ open: visible });
+    }
+    /**
+     * Delay showing tooltip based on mouseEnterDelay.
+     * @returns void
+     */
+    delayShow = () => {
+        this.clearTimeouts();
+        const delay = (this.mouseEnterDelay ?? 0.1) * 1000;
+        this.showTimeout = setTimeout(() => {
+            if (this.open === undefined) {
+                this.setVisible(true);
+            }
+        }, delay);
+    };
+    /**
+     * Delay hiding tooltip based on mouseLeaveDelay.
+     * @returns void
+     */
+    delayHide = () => {
+        this.clearTimeouts();
+        const delay = (this.mouseLeaveDelay ?? 0.1) * 1000;
+        this.hideTimeout = setTimeout(() => {
+            if (this.open === undefined) {
+                this.setVisible(false);
+            }
+        }, delay);
+    };
+    /**
+     * Handle trigger mouse enter for hover mode.
+     * @returns void
+     */
+    handleMouseEnter = () => {
+        if (this.trigger === 'hover') {
+            this.delayShow();
+        }
+    };
+    /**
+     * Handle trigger mouse leave for hover mode.
+     * @returns void
+     */
+    handleMouseLeave = () => {
+        if (this.trigger === 'hover') {
+            this.delayHide();
+        }
+    };
+    /**
+     * Handle focus for focus trigger mode.
+     * @returns void
+     */
+    handleFocus = () => {
+        if (this.trigger === 'focus') {
+            this.delayShow();
+        }
+    };
+    /**
+     * Handle blur for focus trigger mode.
+     * @returns void
+     */
+    handleBlur = () => {
+        if (this.trigger === 'focus') {
+            this.delayHide();
+        }
+    };
+    /**
+     * Handle click for click trigger mode.
+     * @returns void
+     */
+    handleClick = () => {
+        if (this.trigger === 'click') {
+            if (this.open === undefined) {
+                this.setVisible(!this.visible);
+            }
+        }
+    };
+    /**
+     * Handle context menu trigger mode.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    handleContextMenu = (e) => {
+        if (this.trigger === 'contextMenu') {
+            e.preventDefault();
+            if (this.open === undefined) {
+                this.setVisible(!this.visible);
+            }
+        }
+    };
+    /**
+     * Close tooltip when clicking outside.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    handleDocumentClick = (e) => {
+        if (this.trigger === 'click' || this.trigger === 'contextMenu') {
+            const target = e.target;
+            // Check if click is inside component
+            if (this.el.contains(target))
+                return;
+            // Check if click is inside portal
+            const portalEl = this.portalInstance?.getElement?.();
+            if (portalEl?.contains(target))
+                return;
+            if (this.open === undefined) {
+                this.setVisible(false);
+            }
+        }
+    };
+    /**
+     * Handle hover inside portal to prevent hide.
+     * @returns void
+     */
+    handlePortalMouseEnter = () => {
+        if (this.trigger === 'hover') {
+            this.clearTimeouts();
+        }
+    };
+    /**
+     * Handle mouse leave from portal for hover trigger.
+     * @returns void
+     */
+    handlePortalMouseLeave = () => {
+        if (this.trigger === 'hover') {
+            this.delayHide();
+        }
+    };
+    /**
+     * Add global event listeners.
+     * @returns void
+     */
+    addEventListeners() {
+        document.addEventListener('click', this.handleDocumentClick);
+    }
+    /**
+     * Remove global event listeners.
+     * @returns void
+     */
+    removeEventListeners() {
+        document.removeEventListener('click', this.handleDocumentClick);
+    }
+    /**
+     * Determine whether to render arrow.
+     * @returns boolean
+     */
+    shouldShowArrow() {
+        if (typeof this.arrow === 'boolean') {
+            return this.arrow;
+        }
+        return this.arrow !== undefined;
+    }
+    /**
+     * Get trigger element inside shadow root.
+     * @returns HTMLElement | undefined
+     */
+    getTriggerEl() {
+        return this.el.shadowRoot
+            ? this.el.shadowRoot.querySelector('.x-tooltip-trigger')
+            : this.el.querySelector('.x-tooltip-trigger');
+    }
+    // ==================== Portal Methods ====================
+    /**
+     * Calculate arrow position based on trigger element and placement
+     * @returns { arrowX: number; arrowY: number }
+     */
+    calculateArrowPosition() {
+        const triggerEl = this.getTriggerEl();
+        if (!triggerEl) {
+            return { arrowX: 0, arrowY: 0 };
+        }
+        const triggerRect = triggerEl.getBoundingClientRect();
+        const triggerWidth = triggerRect.width;
+        const triggerHeight = triggerRect.height;
+        let arrowX = 0;
+        let arrowY = 0;
+        // Calculate arrow position based on placement
+        // We want the arrow to point at the center of the trigger
+        switch (this.placement) {
+            // Top placements - arrow points down, X is relative to trigger center
+            case 'top':
+                arrowX = triggerWidth / 2;
+                arrowY = 0;
+                break;
+            case 'topLeft':
+                arrowX = Math.min(20, triggerWidth / 2);
+                arrowY = 0;
+                break;
+            case 'topRight':
+                arrowX = triggerWidth - Math.min(20, triggerWidth / 2);
+                arrowY = 0;
+                break;
+            // Bottom placements - arrow points up, X is relative to trigger center
+            case 'bottom':
+                arrowX = triggerWidth / 2;
+                arrowY = 0;
+                break;
+            case 'bottomLeft':
+                arrowX = Math.min(20, triggerWidth / 2);
+                arrowY = 0;
+                break;
+            case 'bottomRight':
+                arrowX = triggerWidth - Math.min(20, triggerWidth / 2);
+                arrowY = 0;
+                break;
+            // Left placements - arrow points right, Y is relative to trigger center
+            case 'left':
+                arrowX = 0;
+                arrowY = triggerHeight / 2;
+                break;
+            case 'leftTop':
+                arrowX = 0;
+                arrowY = Math.min(16, triggerHeight / 2);
+                break;
+            case 'leftBottom':
+                arrowX = 0;
+                arrowY = triggerHeight - Math.min(16, triggerHeight / 2);
+                break;
+            // Right placements - arrow points left, Y is relative to trigger center
+            case 'right':
+                arrowX = 0;
+                arrowY = triggerHeight / 2;
+                break;
+            case 'rightTop':
+                arrowX = 0;
+                arrowY = Math.min(16, triggerHeight / 2);
+                break;
+            case 'rightBottom':
+                arrowX = 0;
+                arrowY = triggerHeight - Math.min(16, triggerHeight / 2);
+                break;
+        }
+        return { arrowX, arrowY };
+    }
+    /**
+     * Build tooltip content element for portal.
+     * @returns HTMLElement
+     */
+    buildTooltipElement() {
+        // Create x-tooltip-content component
+        const tooltipEl = document.createElement('x-tooltip-content');
+        // Set properties
+        tooltipEl.tooltipTitle = this.tooltipTitle || '';
+        tooltipEl.placement = this.placement;
+        tooltipEl.showArrow = this.shouldShowArrow();
+        if (this.color) {
+            tooltipEl.color = this.color;
+        }
+        if (this.classNames?.root) {
+            tooltipEl.contentClass = this.classNames.root;
+        }
+        // Calculate and set arrow position CSS variables
+        const { arrowX, arrowY } = this.calculateArrowPosition();
+        tooltipEl.style.setProperty('--arrow-x', `${arrowX}px`);
+        tooltipEl.style.setProperty('--arrow-y', `${arrowY}px`);
+        // Add event listeners for hover on portal
+        tooltipEl.addEventListener('mouseenter', this.handlePortalMouseEnter);
+        tooltipEl.addEventListener('mouseleave', this.handlePortalMouseLeave);
+        return tooltipEl;
+    }
+    /**
+     * Create or update portal content for tooltip.
+     * @returns void
+     */
+    updatePortal() {
+        const hasTitle = !!this.tooltipTitle;
+        if (!this.isOpen || !hasTitle) {
+            if (this.portalInstance) {
+                this.portalInstance.destroy();
+                this.portalInstance = null;
+            }
+            return;
+        }
+        const tooltipElement = this.buildTooltipElement();
+        if (!this.portalInstance) {
+            this.portalInstance = PortalController.create({
+                open: this.isOpen,
+                target: this.getTriggerEl(),
+                placement: this.placement,
+                zIndex: this.zIndex || 9999,
+                offset: 8, // arrow size (5px) + gap (3px)
+                content: tooltipElement,
+                flip: false,
+                shift: this.autoAdjustOverflow !== false,
+            });
+        }
+        else {
+            this.portalInstance.update({
+                open: this.isOpen,
+                target: this.getTriggerEl(),
+                placement: this.placement,
+                offset: 8,
+                content: tooltipElement,
+                flip: false,
+                shift: this.autoAdjustOverflow !== false,
+            });
+        }
+    }
+    /**
+     * Destroy portal instance if present.
+     * @returns void
+     */
+    destroyPortal() {
+        if (this.portalInstance) {
+            this.portalInstance.destroy();
+            this.portalInstance = null;
+        }
+    }
+    // ==================== Render ====================
+    /**
+     * Renders the Tooltip component.
+     *
+     * Flow:
+     * 1. Constructs host classes based on visibility and color.
+     * 2. Attaches event listeners for all trigger modes (hover, focus, click, contextMenu).
+     * 3. Renders a trigger wrapper `span` that wraps the default slot.
+     * 4. The actual tooltip content is rendered via a Portal (managed by `updatePortal`) to escape container clipping.
+     *
+     * @returns JSX.Element
+     */
+    render() {
+        return (h(Host, { key: '7f714f3aef2633cd18aac1fe03be7c840f01aa81', class: {
+                'x-tooltip-wrapper': true,
+                'x-tooltip-open': this.isOpen,
+                'x-tooltip-color': this.color ? true : false,
+            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick, onContextMenu: this.handleContextMenu }, h("span", { key: 'ae94a1ccfc97a0ba7bddb87394e7cbe0e4a4ff2a', class: "x-tooltip-trigger" }, h("slot", { key: '1f2ca22b7b432abe47e12d69e3ea94efe4c06c08' }))));
+    }
+    static get is() { return "x-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-tooltip.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "tooltipTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tooltip tooltip-title=\"Info\"></x-tooltip>"
+                        }],
+                    "text": "The text shown in the tooltip.\r\nUse `tooltipTitle` to avoid conflict with native `title` attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tooltip-title"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TooltipPlacement",
+                    "resolved": "\"bottom\" | \"bottomLeft\" | \"bottomRight\" | \"left\" | \"leftBottom\" | \"leftTop\" | \"right\" | \"rightBottom\" | \"rightTop\" | \"top\" | \"topLeft\" | \"topRight\"",
+                    "references": {
+                        "TooltipPlacement": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tooltip/types.ts::TooltipPlacement",
+                            "referenceLocation": "TooltipPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'top'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-tooltip placement=\"bottom\"></x-tooltip>"
+                        }],
+                    "text": "The position of the tooltip relative to the target."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'top'"
+            },
+            "trigger": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TooltipTrigger",
+                    "resolved": "\"click\" | \"contextMenu\" | \"focus\" | \"hover\"",
+                    "references": {
+                        "TooltipTrigger": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tooltip/types.ts::TooltipTrigger",
+                            "referenceLocation": "TooltipTrigger"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'hover'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-tooltip trigger=\"click\"></x-tooltip>"
+                        }],
+                    "text": "Tooltip trigger mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger",
+                "defaultValue": "'hover'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tooltip color=\"#333\"></x-tooltip>"
+                        }],
+                    "text": "Background color of the tooltip."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tooltip open></x-tooltip>"
+                        }],
+                    "text": "Whether the floating tooltip card is visible or not (controlled mode)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open"
+            },
+            "defaultOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tooltip defaultOpen></x-tooltip>"
+                        }],
+                    "text": "Whether the floating tooltip card is visible by default."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-open",
+                "defaultValue": "false"
+            },
+            "arrow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | TooltipArrowConfig",
+                    "resolved": "boolean | { pointAtCenter?: boolean; }",
+                    "references": {
+                        "TooltipArrowConfig": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tooltip/types.ts::TooltipArrowConfig",
+                            "referenceLocation": "TooltipArrowConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }, {
+                            "name": "example",
+                            "text": "<x-tooltip arrow={false}></x-tooltip>"
+                        }],
+                    "text": "Whether to show arrow.\r\nCan be a boolean or an object with `pointAtCenter` option."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "arrow",
+                "defaultValue": "true"
+            },
+            "mouseEnterDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "0.1"
+                        }, {
+                            "name": "example",
+                            "text": "<x-tooltip mouseEnterDelay={0.5}></x-tooltip>"
+                        }],
+                    "text": "Delay in seconds before tooltip is shown on mouse enter."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mouse-enter-delay",
+                "defaultValue": "0.1"
+            },
+            "mouseLeaveDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "0.1"
+                        }, {
+                            "name": "example",
+                            "text": "<x-tooltip mouseLeaveDelay={0.5}></x-tooltip>"
+                        }],
+                    "text": "Delay in seconds before tooltip is hidden on mouse leave."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mouse-leave-delay",
+                "defaultValue": "0.1"
+            },
+            "destroyTooltipOnHide": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-tooltip destroyTooltipOnHide></x-tooltip>"
+                        }],
+                    "text": "Whether to destroy tooltip on hide."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "destroy-tooltip-on-hide",
+                "defaultValue": "false"
+            },
+            "autoAdjustOverflow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }, {
+                            "name": "example",
+                            "text": "<x-tooltip autoAdjustOverflow={false}></x-tooltip>"
+                        }],
+                    "text": "Whether to adjust popup placement automatically when popup is off screen."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-adjust-overflow",
+                "defaultValue": "true"
+            },
+            "zIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tooltip zIndex={2000}></x-tooltip>"
+                        }],
+                    "text": "Z-index of the tooltip."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "z-index",
+                "defaultValue": "9999"
+            },
+            "classNames": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TooltipClassNames",
+                    "resolved": "TooltipClassNames",
+                    "references": {
+                        "TooltipClassNames": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tooltip/types.ts::TooltipClassNames",
+                            "referenceLocation": "TooltipClassNames"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tooltip classNames={{ root: 'my-tooltip' }}></x-tooltip>"
+                        }],
+                    "text": "Custom class names for tooltip parts."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "styles": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TooltipStyles",
+                    "resolved": "TooltipStyles",
+                    "references": {
+                        "TooltipStyles": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tooltip/types.ts::TooltipStyles",
+                            "referenceLocation": "TooltipStyles"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tooltip styles={{ root: { background: '#000' } }}></x-tooltip>"
+                        }],
+                    "text": "Custom styles for tooltip parts."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "visible": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "openChange",
+                "name": "openChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-tooltip onOpenChange={(ev) => console.log(ev.detail)}></x-tooltip>"
+                        }],
+                    "text": "Callback executed when visibility of the tooltip card is changed."
+                },
+                "complexType": {
+                    "original": "TooltipOpenChangeEventDetail",
+                    "resolved": "TooltipOpenChangeEventDetail",
+                    "references": {
+                        "TooltipOpenChangeEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-tooltip/types.ts::TooltipOpenChangeEventDetail",
+                            "referenceLocation": "TooltipOpenChangeEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Show the tooltip programmatically.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<void>"
+                        }, {
+                            "name": "example",
+                            "text": "await el.show()"
+                        }]
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Hide the tooltip programmatically.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<void>"
+                        }, {
+                            "name": "example",
+                            "text": "await el.hide()"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }];
+    }
+}