import { IAnimatable } from '../../../Behaviors/Animatable'; import { type IAttachable } from '../../../Behaviors/Attachable'; import { ICloseable } from '../../../Behaviors/Closeable'; import { IOpenable } from '../../../Behaviors/Openable'; import { ISlottable } from '../../../Behaviors/Slottable'; import { Placement } from '../../../Types/Placement'; import { Trigger } from '../../../Types/Trigger'; import { CustomElement } from '../../Abstracts/CustomElement'; import type { ITooltipElementProps } from './ITooltipElementProps'; declare const TooltipElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Animatable").IAnimatableProps & IAnimatable) & (abstract new (...args: Array) => IAttachable) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array) => import("../../../Behaviors/TextFormattable").ITextFormattableProps) & (abstract new (...args: Array) => IOpenable & import("../../../Behaviors/Openable").IOpenableEvents) & (abstract new (...args: Array) => import("../../../Behaviors/Closeable").ICloseableProps & import("../../../Behaviors/Closeable").ICloseableEvents & ICloseable) & (abstract new (...args: Array) => import("../../../Behaviors/Slottable").ISlottableProps & ISlottable) & (abstract new (...args: Array) => import("../../../Behaviors/Dimensionable").IDimensionableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * Tooltip - A contextual popup that displays helpful information when hovering over or focusing on an element. * * @description * The Tooltip component provides contextual help and additional information for UI elements through a small * popup that appears on hover, focus, or click interactions. It supports customizable positioning, delays, * animations, and trigger modes. Tooltips automatically calculate optimal placement to avoid viewport edges, * include optional arrow indicators, and can be controlled programmatically or through user interactions. * This component is essential for providing inline help, displaying full text for truncated content, and * offering additional context without cluttering the interface. * * @name Tooltip * @element mosaik-tooltip * @category Primitives * * @slot - The trigger element that activates the tooltip * @slot content - The tooltip content (text, elements, or formatted content) * * @csspart floating - The floating container that positions the tooltip * @csspart body - The main tooltip body containing the content * @csspart arrow - The optional arrow pointing to the trigger element * @csspart text - The text content display element * * @cssprop {String} --tooltip-background-color - Background color of the tooltip * @cssprop {String} --tooltip-border-color - Border color of the tooltip outline * @cssprop {String} --tooltip-border-radius - Corner rounding radius * @cssprop {String} --tooltip-border-style - Border line style * @cssprop {String} --tooltip-border-width - Border thickness * @cssprop {String} --tooltip-font-family - Font family for tooltip text * @cssprop {String} --tooltip-font-size - Font size for tooltip text * @cssprop {String} --tooltip-font-weight - Font weight for tooltip text * @cssprop {String} --tooltip-font-line-height - Line height for tooltip text * @cssprop {String} --tooltip-font-letter-spacing - Letter spacing for tooltip text * @cssprop {String} --tooltip-font-text-decoration - Text decoration style * @cssprop {String} --tooltip-font-text-transform - Text transformation style * @cssprop {String} --tooltip-foreground-color - Text color * @cssprop {String} --tooltip-gap - Spacing between tooltip elements * @cssprop {String} --tooltip-max-width - Maximum width of the tooltip * @cssprop {String} --tooltip-padding-top - Top padding inside the tooltip * @cssprop {String} --tooltip-padding-right - Right padding inside the tooltip * @cssprop {String} --tooltip-padding-bottom - Bottom padding inside the tooltip * @cssprop {String} --tooltip-padding-left - Left padding inside the tooltip * * @dependency {TextElement} - Text rendering component for tooltip content * @dependency {PortalElement} - Portal component for rendering outside DOM hierarchy * @dependency {FloatingElement} - Floating positioning component * * @fires opened {OpenedEvent} - Fired when the tooltip is opened * @fires closed {ClosedEvent} - Fired when the tooltip is closed * * @example * Basic tooltip on hover: * ```html * * * * ``` * * @example * Tooltip with custom placement: * ```html * * * * ``` * * @example * Tooltip with click trigger: * ```html * * Click for info * * ``` * * @example * Tooltip with custom delays: * ```html * * * * ``` * * @example * Programmatic tooltip control: * ```html * * * * * ``` * * @public */ export declare class TooltipElement extends TooltipElement_base implements ITooltipElementProps, IAttachable, IOpenable, ICloseable, ISlottable, IAnimatable { private readonly _projectionController; private _floatingElement; private _content; private _placement; private _horizontalOffset; private _verticalOffset; private _isOpen; private _showDelay; private _hideDelay; private _trigger; private _staysOpen; private _hoverTimeout; private _blurSubscription; private _focusSubscription; private _clickSubscription; private _keydownSubscription; private _mouseoverSubscription; private _mouseoutSubscription; private _slottedControl; private _anchorReady; /** * @public */ constructor(); /** * Returns the `is` property. * * @public * @static * @readonly */ static get is(): string; /** * Gets whether slotted content is projected into the tooltip. * * @public * @readonly */ get hasSlottedContent(): boolean; /** * Gets the formatted content string. * * @public * @readonly */ get formattedContent(): string; /** * Gets or sets the `content` property. * * @public * @attr */ get content(): string; set content(value: string); /** * Gets or sets the `placement` property. * * @public * @attr */ get placement(): Placement; set placement(value: Placement); /** * Gets or sets the `horizontalOffset` property. * * @public * @attr */ get horizontalOffset(): number; set horizontalOffset(value: number); /** * Gets or sets the `verticalOffset` property. * * @public * @attr */ get verticalOffset(): number; set verticalOffset(value: number); /** * Gets or sets the `isOpen` property. * * @public * @attr */ get isOpen(): boolean; set isOpen(value: boolean); /** * Gets or sets the `showDelay` property. * * @public * @attr */ get showDelay(): number; set showDelay(value: number); /** * Gets or sets the `hideDelay` property. * * @public * @attr */ get hideDelay(): number; set hideDelay(value: number); /** * Gets or sets the `trigger` property. * * @public * @attr */ get trigger(): Trigger; set trigger(value: Trigger); /** * Gets or sets the `staysOpen` property. * * @public * @attr */ get staysOpen(): boolean; set staysOpen(value: boolean); /** * Gets the anchor element for the floating popup. * This is the slotted control or the explicitly attached control. * * @public * @readonly */ get anchorElement(): HTMLElement | null; /** * Gets whether the floating popup should be active. * FloatingElement handles its own enter/exit animations. * * @public * @readonly */ get isFloatingActive(): boolean; /** * Opens the tooltip. * * @public * @override */ open(): Promise; /** * Closes the tooltip. * * @public * @override */ close(): Promise; /** * @public * @override */ attach(control: HTMLElement | string): void; /** * @public * @override */ connectedCallback(): void; /** * @public * @override */ disconnectedCallback(): void; /** * @protected * @override */ protected onApplyTemplate(): void; /** * @protected * @override */ protected firstUpdated(changedProperties: Map): void; /** * @protected */ protected onBlur(_event: FocusEvent): void; /** * @protected */ protected onClick(_event: MouseEvent): void; /** * @protected */ protected onFocus(_event: FocusEvent): void; /** * @protected */ protected onKeyDown(event: KeyboardEvent): void; /** * @protected */ protected onMouseOver(_event: MouseEvent): void; /** * @protected */ protected onMouseOut(_event: MouseEvent): void; /** * @protected */ protected onIsOpenPropertyChange(): void; /** * @protected */ protected onContentPropertyChange(_oldValue: string, newValue: string): void; /** * @protected */ protected onDistancePropertyChange(): void; /** * @protected */ protected onPlacementPropertyChange(): void; /** * @protected */ protected onSkiddingPropertyChange(): void; /** * @protected */ protected onDisabledPropertyChange(): void; /** * Handles changes to the `for` attribute to rebind control events. * * @protected */ protected onForPropertyChange(): void; /** * Handles changes to the default slot to detect control elements. * * @private */ private onDefaultSlotChange; /** * Updates the floating element's anchor reference by triggering a re-render. * The anchor is bound via the template. * * @private */ private updateFloatingAnchor; /** * Binds event listeners to the control element. * * @private */ private bindControlEvents; /** * Unbinds event listeners from the control element. * * @private */ private unbindControlEvents; /** * @private */ private hasTrigger; } /** * @public */ export declare namespace TooltipElement { type Props = ITooltipElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-tooltip': TooltipElement; } } export {}; //# sourceMappingURL=TooltipElement.d.ts.map