bromcom-ui-next 0.1.29 → 0.1.30

package/dist/collection/components/tooltip/tooltip.component.js

@@ -1,194 +1,449 @@
-import { arrow, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
 import { h } from "@stencil/core";
+import { computePosition, flip, shift, offset, arrow, autoUpdate } from "@floating-ui/dom";
 import { tv } from "../../utils/tv";
 /**
  * @component BcmTooltip
- * @description A lightweight tooltip component that displays brief contextual information when hovering or clicking on a target element.
- * Supports different sizes, trigger types (click or hover), placements (top, right, bottom, left), and can be controlled via slots or props.
+ * @description A flexible tooltip component that provides contextual information on hover or click.
+ * Built on the native Popover API for top-layer rendering and Floating UI for intelligent positioning.
+ * Automatically handles overflow, flipping, and complex shadow DOM scenarios.
  *
- * @example Basic Hover Tooltip
- * <bcm-tooltip trigger="hover" size="medium" placement="top" message="This is a tooltip.">
- *   <bcm-button>Hover Me</bcm-button>
+ * @slot - The trigger element that will show the tooltip
+ * @slot content - Custom rich content for the tooltip (overrides message prop)
+ *
+ * @part tooltip - The tooltip container element (for custom styling)
+ * @part arrow - The arrow pointer element
+ * @part content - The content wrapper element
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage with text message -->
+ * <bcm-tooltip message="This is a tooltip">
+ *   <button>Hover me</button>
+ * </bcm-tooltip>
+ *
+ * <!-- With custom rich content -->
+ * <bcm-tooltip placement="right" size="large">
+ *   <button>Click me</button>
+ *   <div slot="content">
+ *     <strong>Rich content</strong>
+ *     <p>You can add any HTML here</p>
+ *   </div>
  * </bcm-tooltip>
  *
- * @example Click Tooltip with Programmatic Control
- * <bcm-tooltip id="my-tooltip" trigger="click" message="Controlled tooltip.">
- *   <bcm-button>Click Me</bcm-button>
+ * <!-- Click trigger with custom delays -->
+ * <bcm-tooltip trigger="click" show-delay="0" hide-delay="0">
+ *   <span>Click me</span>
+ * </bcm-tooltip>
+ *
+ * <!-- Mouse following mode -->
+ * <bcm-tooltip follow={true} message="I follow your cursor!">
+ *   <div>Move your mouse here</div>
+ * </bcm-tooltip>
+ *
+ * <!-- Programmatic control -->
+ * <bcm-tooltip id="myTooltip" message="Programmatic tooltip">
+ *   <span>Trigger</span>
  * </bcm-tooltip>
  * <script>
- *   const tooltip = document.querySelector('#my-tooltip');
- *   tooltip.openTooltip(); // Opens the tooltip
- *   tooltip.closeTooltip(); // Closes the tooltip
+ *   const tooltip = document.getElementById('myTooltip');
+ *   tooltip.show();
+ *   setTimeout(() => tooltip.hide(), 2000);
  * </script>
  *
- * @slot - Default slot for the target element that triggers the tooltip
- * @slot tooltip - Slot for custom tooltip content
- *
- * @csspart tooltip - The root tooltip container element, stylable for the entire tooltip
- * @csspart arrow - The arrow element of the tooltip, stylable for the positioning arrow
+ * <!-- Custom styling with CSS parts -->
+ * <style>
+ *   bcm-tooltip::part(tooltip) {
+ *     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ *     border-radius: 12px;
+ *   }
+ *   bcm-tooltip::part(arrow) {
+ *     background: #667eea;
+ *   }
+ * </style>
+ * ```
  */
-export class Tooltip {
+export class BcmTooltip {
     constructor() {
+        this.mouseX = 0;
+        this.mouseY = 0;
         /**
-         * @prop {('click' | 'hover')} trigger - Defines the interaction type to show/hide the tooltip.
-         * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.
-         * Default: 'hover'
+         * How the tooltip is triggered
+         * - 'hover': Shows on mouse enter, hides on mouse leave
+         * - 'click': Toggles on click, closes on outside click or Escape key
          */
         this.trigger = 'hover';
         /**
-         * @prop {('top' | 'right' | 'bottom' | 'left')} placement - Defines the position of the tooltip relative to the target element.
-         * Default: 'top'
+         * Preferred placement of the tooltip relative to the trigger
+         * Note: Tooltip will automatically flip if there's not enough space
+         * - 'top': Above the trigger element
+         * - 'right': To the right of the trigger element
+         * - 'bottom': Below the trigger element
+         * - 'left': To the left of the trigger element
          */
         this.placement = 'top';
         /**
-         * @prop {('small' | 'medium' | 'large')} size - Defines the size of the tooltip.
-         * Controls the text size and padding of the tooltip content.
-         * Default: 'medium'
+         * Size variant of the tooltip
+         * - 'small': Compact tooltip with minimal padding (text-size-3, py-1 px-2)
+         * - 'medium': Standard tooltip size (text-size-4, py-1.5 px-3)
+         * - 'large': Larger tooltip for more content (text-size-5, py-2 px-4)
          */
         this.size = 'medium';
         /**
-         * @prop {number} showDelay - Delay in milliseconds before showing or hiding the tooltip.
-         * Helps prevent flickering on quick mouse movements.
-         * Default: 150
+         * Delay in milliseconds before showing the tooltip
+         * Useful to prevent tooltips from appearing on quick mouse movements
          */
         this.showDelay = 150;
-        this.open = false;
-        this.toggleTooltip = () => {
-            this.open = !this.open;
-            this.updateOutsideClickListener();
+        /**
+         * Delay in milliseconds before hiding the tooltip
+         * Provides a grace period for mouse movements
+         */
+        this.hideDelay = 100;
+        /**
+         * Whether to show an arrow pointing to the trigger element
+         * Note: Arrow is automatically hidden in 'follow' mode
+         */
+        this.arrow = true;
+        /**
+         * Disables the tooltip, preventing it from showing
+         * Useful for conditional tooltips based on application state
+         */
+        this.disabled = false;
+        /**
+         * Distance in pixels between the tooltip and the trigger element
+         * Also used as the offset in 'follow' mode
+         */
+        this.offset = 12;
+        /**
+         * Makes the tooltip follow the mouse cursor
+         * When enabled:
+         * - Arrow is hidden
+         * - Tooltip position updates smoothly with cursor movement
+         * - Pointer events are disabled on tooltip to prevent interference
+         */
+        this.follow = false;
+        this.isOpen = false;
+        this.handleSlotChange = () => {
+            var _a;
+            const slot = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
+            if (!slot)
+                return;
+            const elements = slot.assignedElements();
+            const assignedElement = elements[0];
+            // Get the actual element position from the host, not shadow DOM
+            // This ensures proper positioning across shadow boundaries
+            this.triggerRef = (assignedElement || this.host);
+            if (!this.triggerRef)
+                return;
+            // Setup ARIA relationship
+            if (this.tooltipRef && this.tooltipId) {
+                this.triggerRef.setAttribute('aria-describedby', this.tooltipId);
+            }
+            // Remove old listeners
+            this.removeTriggerListeners();
+            // Add new listeners
+            this.setupTriggerListeners();
+        };
+        this.handleMouseEnter = () => {
+            if (!this.disabled) {
+                this.show();
+            }
         };
-        this.showTooltip = () => {
-            clearTimeout(this.hoverTimeout);
-            this.hoverTimeout = setTimeout(() => {
-                this.open = true;
-                this.updateOutsideClickListener();
-            }, this.showDelay);
+        this.handleMouseLeave = () => {
+            this.hide();
         };
-        this.hideTooltip = () => {
-            clearTimeout(this.hoverTimeout);
-            this.hoverTimeout = setTimeout(() => {
-                this.open = false;
-                this.updateOutsideClickListener();
-            }, this.showDelay);
+        this.handleMouseMove = (e) => {
+            this.mouseX = e.clientX;
+            this.mouseY = e.clientY;
         };
-        this.handleSlotChange = () => {
-            const slot = this.el.shadowRoot.querySelector('slot');
-            const elements = slot.assignedElements();
-            this.targetElement = elements[0];
-            if (this.targetElement) {
-                this.targetElement.removeEventListener('click', this.toggleTooltip);
-                this.targetElement.removeEventListener('mouseenter', this.showTooltip);
-                this.targetElement.removeEventListener('mouseleave', this.hideTooltip);
-                if (this.trigger === 'click') {
-                    this.targetElement.addEventListener('click', this.toggleTooltip);
-                    this.targetElement.setAttribute('aria-expanded', this.open.toString());
-                    this.targetElement.setAttribute('aria-describedby', 'tooltip');
-                }
-                if (this.trigger === 'hover') {
-                    this.targetElement.addEventListener('mouseenter', this.showTooltip);
-                    this.targetElement.addEventListener('mouseleave', this.hideTooltip);
-                    this.targetElement.setAttribute('aria-describedby', 'tooltip');
-                }
-                if (this.tooltipElement && !this.cleanupAutoUpdate) {
-                    this.cleanupAutoUpdate = autoUpdate(this.targetElement, this.tooltipElement, () => this.updatePosition(), { animationFrame: false });
-                }
+        this.handleClick = () => {
+            if (!this.disabled) {
+                this.toggle();
             }
         };
-        this.handleOutsideClick = (event) => {
-            if (!this.el.contains(event.target) && this.open) {
-                this.open = false;
-                this.updateOutsideClickListener();
+        this.handleOutsideClick = (e) => {
+            var _a;
+            const target = e.target;
+            if (!this.host.contains(target) && !((_a = this.tooltipRef) === null || _a === void 0 ? void 0 : _a.contains(target))) {
+                this.hide();
             }
         };
-        this.updatePosition = async () => {
-            if (!this.targetElement || !this.tooltipElement || !this.arrowElement)
-                return;
-            const { x, y, placement, middlewareData } = await computePosition(this.targetElement, this.tooltipElement, {
-                placement: this.placement,
-                middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],
-            });
-            Object.assign(this.tooltipElement.style, {
-                left: `${x}px`,
-                top: `${y}px`,
-            });
-            const { x: arrowX, y: arrowY } = middlewareData.arrow || { x: 0, y: 0 };
-            const basePlacement = placement.split('-')[0];
-            const staticSide = {
-                top: 'bottom',
-                right: 'left',
-                bottom: 'top',
-                left: 'right',
-            }[basePlacement];
-            Object.assign(this.arrowElement.style, {
-                left: arrowX != null ? `${arrowX}px` : '',
-                top: arrowY != null ? `${arrowY}px` : '',
-                [staticSide]: '-4px',
-            });
+        this.handleKeyDown = (e) => {
+            if (e.key === 'Escape' && this.isOpen) {
+                // Only close if this tooltip's popover element is the topmost
+                const topmostPopover = document.querySelector('[popover]:popover-open:last-of-type');
+                if (topmostPopover === this.tooltipRef) {
+                    e.stopPropagation(); // Prevent event from reaching parent popovers
+                    this.hide();
+                    // Return focus to trigger element
+                    if (this.triggerRef && 'focus' in this.triggerRef) {
+                        this.triggerRef.focus();
+                    }
+                }
+            }
+        };
+        this.handleToggle = (e) => {
+            const toggleEvent = e;
+            // Sync our internal state with popover state
+            if (toggleEvent.newState === 'open' && !this.isOpen) {
+                this.isOpen = true;
+            }
+            else if (toggleEvent.newState === 'closed' && this.isOpen) {
+                this.isOpen = false;
+            }
         };
         this.tooltipClass = tv({
             slots: {
-                tooltip: 'bcm-ui-element bcm-tooltip absolute bg-[--tooltip-bg] rounded-md shadow-3 py-1 px-3 min-w-max z-[9999] text-color-base font-medium',
-                arrow: 'absolute w-4 h-4 bg-[--tooltip-bg] transform rotate-45 z-[-1]',
+                tooltip: 'bcm-ui-element fixed m-0 bg-color-default-dark text-color-base rounded-md shadow-3 font-medium z-[9999]',
+                arrow: 'absolute w-2 h-2 bg-color-default-dark rotate-45',
+                content: '',
             },
             variants: {
                 size: {
-                    small: { tooltip: 'text-size-3' },
-                    medium: { tooltip: 'text-size-4' },
-                    large: { tooltip: 'text-size-5' },
+                    small: {
+                        tooltip: 'text-size-3 py-1 px-2',
+                    },
+                    medium: {
+                        tooltip: 'text-size-4 py-1.5 px-3',
+                    },
+                    large: {
+                        tooltip: 'text-size-5 py-2 px-4',
+                    },
                 },
-                isOpen: {
-                    true: { tooltip: 'block' },
-                    false: { tooltip: 'hidden' },
+                follow: {
+                    true: {
+                        tooltip: 'pointer-events-none',
+                    },
                 },
             },
-            defaultVariants: {
-                size: 'medium',
-                isOpen: false,
-            },
-        }, { twMerge: false });
+        });
     }
-    disconnectedCallback() {
-        var _a;
-        document.removeEventListener('click', this.handleOutsideClick);
-        if (this.targetElement) {
-            this.targetElement.removeEventListener('click', this.toggleTooltip);
-            this.targetElement.removeEventListener('mouseenter', this.showTooltip);
-            this.targetElement.removeEventListener('mouseleave', this.hideTooltip);
+    handleDisabledChange(disabled) {
+        if (disabled && this.isOpen) {
+            this.hide();
         }
-        (_a = this.cleanupAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
-        this.cleanupAutoUpdate = null;
-        clearTimeout(this.hoverTimeout);
     }
-    updateOutsideClickListener() {
-        if (this.open) {
-            document.addEventListener('click', this.handleOutsideClick);
+    handleTriggerChange() {
+        this.removeTriggerListeners();
+        this.setupOutsideClickListener();
+        if (this.triggerRef) {
+            this.setupTriggerListeners();
+        }
+    }
+    async handleOpenChange(open) {
+        if (!this.tooltipRef)
+            return;
+        if (open) {
+            this.tooltipRef.showPopover();
+            // Wait for next frame to ensure popover is rendered
+            await new Promise(resolve => requestAnimationFrame(() => resolve(undefined)));
+            if (this.follow) {
+                this.startFollowing();
+            }
+            else {
+                await this.updatePosition();
+                this.startAutoUpdate();
+            }
         }
         else {
-            document.removeEventListener('click', this.handleOutsideClick);
+            this.tooltipRef.hidePopover();
+            this.stopFollowing();
+            this.stopAutoUpdate();
         }
     }
     /**
-     * @method {Promise<void>} openTooltip - Programmatically opens the tooltip.
-     * Triggers the showTooltip logic with the specified delay.
-     * @returns {Promise<void>} A promise that resolves when the tooltip is opened.
+     * Programmatically shows the tooltip
+     * Respects the showDelay prop and disabled state
+     */
+    async show() {
+        if (this.disabled)
+            return;
+        this.clearTimeouts();
+        this.showTimeout = window.setTimeout(() => {
+            this.isOpen = true;
+        }, this.showDelay);
+    }
+    /**
+     * Programmatically hides the tooltip
+     * Respects the hideDelay prop
      */
-    async openTooltip() {
-        this.showTooltip();
+    async hide() {
+        this.clearTimeouts();
+        this.hideTimeout = window.setTimeout(() => {
+            this.isOpen = false;
+        }, this.hideDelay);
     }
     /**
-     * @method {Promise<void>} closeTooltip - Programmatically closes the tooltip.
-     * Triggers the hideTooltip logic with the specified delay.
-     * @returns {Promise<void>} A promise that resolves when the tooltip is closed.
+     * Toggles the tooltip visibility
+     * If open, hides it; if closed, shows it
      */
-    async closeTooltip() {
-        this.hideTooltip();
+    async toggle() {
+        if (this.isOpen) {
+            await this.hide();
+        }
+        else {
+            await this.show();
+        }
+    }
+    clearTimeouts() {
+        if (this.showTimeout) {
+            clearTimeout(this.showTimeout);
+            this.showTimeout = undefined;
+        }
+        if (this.hideTimeout) {
+            clearTimeout(this.hideTimeout);
+            this.hideTimeout = undefined;
+        }
+    }
+    startAutoUpdate() {
+        if (!this.triggerRef || !this.tooltipRef || this.follow)
+            return;
+        this.cleanupAutoUpdate = autoUpdate(this.triggerRef, this.tooltipRef, () => this.updatePosition(), {
+            ancestorScroll: true,
+            ancestorResize: true,
+            elementResize: true,
+            layoutShift: true,
+        });
+    }
+    stopAutoUpdate() {
+        if (this.cleanupAutoUpdate) {
+            this.cleanupAutoUpdate();
+            this.cleanupAutoUpdate = undefined;
+        }
+    }
+    startFollowing() {
+        if (!this.follow)
+            return;
+        const updateFollowPosition = () => {
+            if (!this.isOpen || !this.tooltipRef) {
+                this.rafId = undefined;
+                return;
+            }
+            const offsetX = this.offset;
+            const offsetY = this.offset;
+            this.tooltipRef.style.left = `${this.mouseX + offsetX}px`;
+            this.tooltipRef.style.top = `${this.mouseY + offsetY}px`;
+            this.rafId = requestAnimationFrame(updateFollowPosition);
+        };
+        this.rafId = requestAnimationFrame(updateFollowPosition);
+    }
+    stopFollowing() {
+        if (this.rafId) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = undefined;
+        }
+    }
+    async updatePosition() {
+        if (!this.triggerRef || !this.tooltipRef || this.follow)
+            return;
+        try {
+            // Check if trigger element is still in viewport
+            const triggerRect = this.triggerRef.getBoundingClientRect();
+            const isInViewport = triggerRect.bottom > 0 && triggerRect.top < window.innerHeight && triggerRect.right > 0 && triggerRect.left < window.innerWidth;
+            // Hide tooltip if trigger is out of viewport
+            if (!isInViewport && this.isOpen) {
+                this.hide();
+                return;
+            }
+            const middleware = [offset(this.offset), flip(), shift({ padding: 8 })];
+            if (this.arrow && this.arrowRef) {
+                middleware.push(arrow({ element: this.arrowRef }));
+            }
+            // Use virtual element to properly handle shadow DOM boundaries
+            const virtualElement = {
+                getBoundingClientRect: () => this.triggerRef.getBoundingClientRect(),
+            };
+            const { x, y, placement, middlewareData } = await computePosition(virtualElement, this.tooltipRef, {
+                placement: this.placement,
+                strategy: 'fixed',
+                middleware,
+            });
+            this.tooltipRef.style.left = `${x}px`;
+            this.tooltipRef.style.top = `${y}px`;
+            // Arrow positioning
+            if (this.arrow && this.arrowRef && middlewareData.arrow) {
+                const { x: arrowX, y: arrowY } = middlewareData.arrow;
+                const side = placement.split('-')[0];
+                const staticSide = {
+                    top: 'bottom',
+                    right: 'left',
+                    bottom: 'top',
+                    left: 'right',
+                }[side];
+                Object.assign(this.arrowRef.style, {
+                    left: arrowX != null ? `${arrowX}px` : '',
+                    top: arrowY != null ? `${arrowY}px` : '',
+                    right: '',
+                    bottom: '',
+                    [staticSide]: '-4px',
+                });
+            }
+        }
+        catch (error) {
+            console.error('Failed to compute tooltip position:', error);
+        }
+    }
+    setupTriggerListeners() {
+        if (!this.triggerRef)
+            return;
+        // Add new listeners based on trigger type
+        if (this.trigger === 'hover') {
+            this.triggerRef.addEventListener('mouseenter', this.handleMouseEnter);
+            this.triggerRef.addEventListener('mouseleave', this.handleMouseLeave);
+            if (this.follow) {
+                this.triggerRef.addEventListener('mousemove', this.handleMouseMove);
+            }
+        }
+        else if (this.trigger === 'click') {
+            this.triggerRef.addEventListener('click', this.handleClick);
+        }
+    }
+    removeTriggerListeners() {
+        if (!this.triggerRef)
+            return;
+        this.triggerRef.removeEventListener('mouseenter', this.handleMouseEnter);
+        this.triggerRef.removeEventListener('mouseleave', this.handleMouseLeave);
+        this.triggerRef.removeEventListener('mousemove', this.handleMouseMove);
+        this.triggerRef.removeEventListener('click', this.handleClick);
+    }
+    setupOutsideClickListener() {
+        // Remove existing listener first
+        document.removeEventListener('click', this.handleOutsideClick);
+        // Add listener only for click trigger
+        if (this.trigger === 'click') {
+            document.addEventListener('click', this.handleOutsideClick);
+        }
+    }
+    componentDidLoad() {
+        // Generate unique ID for ARIA relationship
+        this.tooltipId = `tooltip-${Math.random().toString(36).substring(2, 11)}`;
+        // Setup outside click listener for click trigger
+        this.setupOutsideClickListener();
+        // Listen to popover toggle event to sync state
+        if (this.tooltipRef) {
+            this.tooltipRef.addEventListener('toggle', this.handleToggle);
+        }
+        // Setup keyboard listener for manual popover escape handling
+        document.addEventListener('keydown', this.handleKeyDown);
+    }
+    disconnectedCallback() {
+        this.clearTimeouts();
+        this.stopAutoUpdate();
+        this.stopFollowing();
+        this.removeTriggerListeners();
+        document.removeEventListener('click', this.handleOutsideClick);
+        document.removeEventListener('keydown', this.handleKeyDown);
+        if (this.tooltipRef) {
+            this.tooltipRef.removeEventListener('toggle', this.handleToggle);
+        }
     }
     render() {
-        const { tooltip, arrow } = this.tooltipClass({
+        const { tooltip, arrow: arrowClass } = this.tooltipClass({
             size: this.size,
-            isOpen: this.open,
+            follow: this.follow,
         });
-        return (h("div", { key: 'd92fbafaebadf93f8c215e6e3e654e39b494c7fb', class: "relative" }, h("slot", { key: '35de4bc9d0def680a4bab9e64647e9e0944641c0', onSlotchange: () => this.handleSlotChange() }), h("div", { key: 'decee0e16c8aedbb3ab5e9569fdb33fda07cf7fc', role: "tooltip", class: tooltip(), ref: el => (this.tooltipElement = el), part: "tooltip" }, h("div", { key: '33a5f59e988795b1cc55f21fc3e11d7711a1b8ef', class: arrow(), ref: el => (this.arrowElement = el), part: "arrow" }), h("slot", { key: 'b73cc659fea66c2bd868b047bd1698cf2764c954', name: "tooltip" }, this.message))));
+        return (h("div", { key: 'a539406275e1443e4446ec559cb3388ed2456328', class: "inline-block" }, h("slot", { key: 'b144f258b14a04369ff75ed90b7607ea05e23e67', onSlotchange: this.handleSlotChange }), h("div", { key: 'bbd08333a311e09e50bb2f1b3646892546f57164', ref: el => (this.tooltipRef = el), id: this.tooltipId, part: "tooltip", class: tooltip(),
+            // @ts-ignore - popover is a valid attribute
+            popover: "manual", role: "tooltip" }, this.arrow && !this.follow && h("div", { key: '7170aba70efdf413f4823cf2eff5618271b2fa70', ref: el => (this.arrowRef = el), part: "arrow", class: arrowClass() }), h("div", { key: '4fd9b56ce036663caaf1a75874e95ea566e214ef', part: "content" }, h("slot", { key: 'd5ab1ab3ef54e1c827ed1d009e226258a099378b', name: "content" }, this.message)))));
     }
     static get is() { return "bcm-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -206,76 +461,84 @@ export class Tooltip {
         return {
             "trigger": {
                 "type": "string",
-                "attribute": "trigger",
                 "mutable": false,
                 "complexType": {
-                    "original": "'click' | 'hover'",
+                    "original": "TooltipTrigger",
                     "resolved": "\"click\" | \"hover\"",
-                    "references": {}
+                    "references": {
+                        "TooltipTrigger": {
+                            "location": "local",
+                            "path": "/Users/muratpolatozkan/works/bromcom/bromcom-ui-v2/src/components/tooltip/tooltip.component.tsx",
+                            "id": "src/components/tooltip/tooltip.component.tsx::TooltipTrigger"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "prop",
-                            "text": "{('click' | 'hover')} trigger - Defines the interaction type to show/hide the tooltip.\n'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.\nDefault: 'hover'"
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "How the tooltip is triggered\n- 'hover': Shows on mouse enter, hides on mouse leave\n- 'click': Toggles on click, closes on outside click or Escape key"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "trigger",
                 "defaultValue": "'hover'"
             },
             "placement": {
                 "type": "string",
-                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
-                    "original": "'top' | 'right' | 'bottom' | 'left'",
+                    "original": "TooltipPlacement",
                     "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
-                    "references": {}
+                    "references": {
+                        "TooltipPlacement": {
+                            "location": "local",
+                            "path": "/Users/muratpolatozkan/works/bromcom/bromcom-ui-v2/src/components/tooltip/tooltip.component.tsx",
+                            "id": "src/components/tooltip/tooltip.component.tsx::TooltipPlacement"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "prop",
-                            "text": "{('top' | 'right' | 'bottom' | 'left')} placement - Defines the position of the tooltip relative to the target element.\nDefault: 'top'"
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "Preferred placement of the tooltip relative to the trigger\nNote: Tooltip will automatically flip if there's not enough space\n- 'top': Above the trigger element\n- 'right': To the right of the trigger element\n- 'bottom': Below the trigger element\n- 'left': To the left of the trigger element"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "placement",
                 "defaultValue": "'top'"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
-                    "original": "'small' | 'medium' | 'large'",
+                    "original": "TooltipSize",
                     "resolved": "\"large\" | \"medium\" | \"small\"",
-                    "references": {}
+                    "references": {
+                        "TooltipSize": {
+                            "location": "local",
+                            "path": "/Users/muratpolatozkan/works/bromcom/bromcom-ui-v2/src/components/tooltip/tooltip.component.tsx",
+                            "id": "src/components/tooltip/tooltip.component.tsx::TooltipSize"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "prop",
-                            "text": "{('small' | 'medium' | 'large')} size - Defines the size of the tooltip.\nControls the text size and padding of the tooltip content.\nDefault: 'medium'"
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "Size variant of the tooltip\n- 'small': Compact tooltip with minimal padding (text-size-3, py-1 px-2)\n- 'medium': Standard tooltip size (text-size-4, py-1.5 px-3)\n- 'large': Larger tooltip for more content (text-size-5, py-2 px-4)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'medium'"
             },
             "message": {
                 "type": "string",
-                "attribute": "message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -283,21 +546,18 @@ export class Tooltip {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "prop",
-                            "text": "{string} message - Custom text for the tooltip content.\nUsed as fallback content if the 'tooltip' slot is not provided."
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "Simple text message to display in the tooltip\nCan be overridden by slotting content into the 'content' slot"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "message"
             },
             "showDelay": {
                 "type": "number",
-                "attribute": "show-delay",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -307,27 +567,142 @@ export class Tooltip {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "prop",
-                            "text": "{number} showDelay - Delay in milliseconds before showing or hiding the tooltip.\nHelps prevent flickering on quick mouse movements.\nDefault: 150"
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "Delay in milliseconds before showing the tooltip\nUseful to prevent tooltips from appearing on quick mouse movements"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "show-delay",
                 "defaultValue": "150"
+            },
+            "hideDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Delay in milliseconds before hiding the tooltip\nProvides a grace period for mouse movements"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-delay",
+                "defaultValue": "100"
+            },
+            "arrow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show an arrow pointing to the trigger element\nNote: Arrow is automatically hidden in 'follow' mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "arrow",
+                "defaultValue": "true"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the tooltip, preventing it from showing\nUseful for conditional tooltips based on application state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "offset": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Distance in pixels between the tooltip and the trigger element\nAlso used as the offset in 'follow' mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "offset",
+                "defaultValue": "12"
+            },
+            "follow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the tooltip follow the mouse cursor\nWhen enabled:\n- Arrow is hidden\n- Tooltip position updates smoothly with cursor movement\n- Pointer events are disabled on tooltip to prevent interference"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "follow",
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "open": {}
+            "isOpen": {}
         };
     }
     static get methods() {
         return {
-            "openTooltip": {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically shows the tooltip\nRespects the showDelay prop and disabled state",
+                    "tags": []
+                }
+            },
+            "hide": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],
@@ -340,17 +715,11 @@ export class Tooltip {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "method",
-                            "text": "{Promise<void>} openTooltip - Programmatically opens the tooltip.\nTriggers the showTooltip logic with the specified delay."
-                        }, {
-                            "name": "returns",
-                            "text": "A promise that resolves when the tooltip is opened."
-                        }]
+                    "text": "Programmatically hides the tooltip\nRespects the hideDelay prop",
+                    "tags": []
                 }
             },
-            "closeTooltip": {
+            "toggle": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],
@@ -363,18 +732,24 @@ export class Tooltip {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "method",
-                            "text": "{Promise<void>} closeTooltip - Programmatically closes the tooltip.\nTriggers the hideTooltip logic with the specified delay."
-                        }, {
-                            "name": "returns",
-                            "text": "A promise that resolves when the tooltip is closed."
-                        }]
+                    "text": "Toggles the tooltip visibility\nIf open, hides it; if closed, shows it",
+                    "tags": []
                 }
             }
         };
     }
-    static get elementRef() { return "el"; }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "handleDisabledChange"
+            }, {
+                "propName": "trigger",
+                "methodName": "handleTriggerChange"
+            }, {
+                "propName": "isOpen",
+                "methodName": "handleOpenChange"
+            }];
+    }
 }
 //# sourceMappingURL=tooltip.component.js.map