/**
* PXM Tooltip Component
*
* A flexible tooltip system with trigger-based activation and intelligent positioning.
* This component provides structure and behavior only - all styling is controlled by your CSS.
*
* Features:
* - Multiple positioning options (top, bottom, left, right)
* - Hover and focus triggers with configurable delays
* - Keyboard support (Escape to close)
* - Event-driven animation system for custom animations
* - CSS-based styling via state attributes
* - Portal rendering for z-index management
* - Dynamic content support
* - Lightweight and performant
*
* Basic Usage:
* ```html
*
*
*
*
*
* This is a helpful tooltip!
*
*
* ```
*
* Events:
* - pxm:tooltip:before-show - Cancelable. Fired before tooltip shows.
* - pxm:tooltip:after-show - Fired after tooltip shows.
* - pxm:tooltip:show - Fired when tooltip shows (for compatibility).
* - pxm:tooltip:before-hide - Cancelable. Fired before tooltip hides.
* - pxm:tooltip:after-hide - Fired after tooltip hides.
* - pxm:tooltip:hide - Fired when tooltip hides (for compatibility).
*
* Accessibility:
* This component implements the dual-attribute pattern:
* - ARIA attributes (aria-describedby, aria-expanded) for screen readers and assistive technology
* - Data attributes (data-state, data-side, data-disabled) for CSS styling and JavaScript interaction
* Additional ARIA attributes, labels, and roles should be added by the consumer as needed.
*/
export interface TooltipEventDetail {
content: HTMLElement;
trigger: HTMLElement;
element: HTMLElement;
complete: () => void;
}
export interface TooltipStateEventDetail {
content: HTMLElement;
trigger: HTMLElement;
element: HTMLElement;
open: boolean;
}
declare class PxmTooltip extends HTMLElement {
private config;
private state;
private trigger?;
private content?;
private arrow?;
private mutationObserver?;
private animationPromises;
private portalContainer?;
private resizeObserver?;
static get observedAttributes(): string[];
constructor();
connectedCallback(): void;
disconnectedCallback(): void;
attributeChangedCallback(_name: string, oldValue: string, newValue: string): void;
private setupTooltip;
private setupPortal;
private setupTriggerEvents;
private setupKeyboardHandling;
private setupPositioning;
private scheduleShow;
private scheduleHide;
private clearShowTimeout;
private clearHideTimeout;
private updatePosition;
private calculateTooltipPosition;
private updateArrowPosition;
private createAnimationPromise;
private resolveAnimation;
private show;
private hide;
private updateState;
private observeChanges;
private cleanup;
/**
* Get the current open state
*/
get open(): boolean;
/**
* Set the open state
*/
set open(value: boolean);
/**
* Get the current side
*/
get side(): string;
/**
* Set the side
*/
set side(value: string);
/**
* Get the current disabled state
*/
get disabled(): boolean;
/**
* Set the disabled state
*/
set disabled(value: boolean);
/**
* Programmatically show the tooltip
*/
showTooltip(): Promise;
/**
* Programmatically hide the tooltip
*/
hideTooltip(): Promise;
/**
* Check if the tooltip is currently animating
*/
isAnimating(): boolean;
/**
* Remove default animations (useful when using custom animation libraries)
*/
removeDefaultAnimations(): void;
}
export { PxmTooltip };