igniteui-webcomponents/components/tooltip/tooltip.d.ts

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

import { LitElement, type PropertyValues } from 'lit';
import type { Constructor } from '../common/mixins/constructor.js';
import { type PopoverPlacement } from '../popover/popover.js';
export interface IgcTooltipComponentEventMap {
    igcOpening: CustomEvent<void>;
    igcOpened: CustomEvent<void>;
    igcClosing: CustomEvent<void>;
    igcClosed: CustomEvent<void>;
}
declare const IgcTooltipComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcTooltipComponentEventMap>> & Constructor<LitElement>;
/**
 * Provides a way to display supplementary information related to an element when a user interacts with it (e.g., hover, focus).
 * It offers features such as placement customization, delays, sticky mode, and animations.
 *
 * @element igc-tooltip
 *
 * @slot - Default slot of the tooltip component.
 * @slot close-button - Slot for custom sticky-mode close action (e.g., an icon/button).
 *
 * @csspart base - The wrapping container of the tooltip content.
 *
 * @fires igcOpening - Emitted before the tooltip begins to open. Can be canceled to prevent opening.
 * @fires igcOpened - Emitted after the tooltip has successfully opened and is visible.
 * @fires igcClosing - Emitted before the tooltip begins to close. Can be canceled to prevent closing.
 * @fires igcClosed - Emitted after the tooltip has been fully removed from view.
 */
export default class IgcTooltipComponent extends IgcTooltipComponent_base {
    static readonly tagName = "igc-tooltip";
    static styles: import("lit").CSSResult[];
    static register(): void;
    private readonly _internals;
    private readonly _controller;
    private readonly _containerRef;
    private readonly _player;
    private readonly _showAnimation;
    private readonly _hideAnimation;
    private _timeoutId?;
    private _autoHideDelay;
    private _showDelay;
    private _hideDelay;
    private _arrowElement;
    private get _arrowOffset();
    /**
     * Whether the tooltip is showing.
     *
     * @attr open
     * @default false
     */
    set open(value: boolean);
    get open(): boolean;
    /**
     * Whether to disable the rendering of the arrow indicator for the tooltip.
     *
     * @deprecated since 6.1.0. Use `with-arrow` to control the behavior of the tooltip arrow.
     * @attr disable-arrow
     * @default false
     */
    set disableArrow(value: boolean);
    /**
     * @deprecated since 6.1.0. Use `with-arrow` to control the behavior of the tooltip arrow.
     */
    get disableArrow(): boolean;
    /**
     * Whether to render an arrow indicator for the tooltip.
     *
     * @attr with-arrow
     * @default false
     */
    withArrow: boolean;
    /**
     * The offset of the tooltip from the anchor in pixels.
     *
     * @attr offset
     * @default 6
     */
    offset: number;
    /**
     * Where to place the floating element relative to the parent anchor element.
     *
     * @attr placement
     * @default bottom
     */
    placement: PopoverPlacement;
    /**
     * An element instance or an IDREF to use as the anchor for the tooltip.
     *
     * @remarks
     * Trying to bind to an IDREF that does not exist in the current DOM root at will not work.
     * In such scenarios, it is better to get a DOM reference and pass it to the tooltip instance.
     *
     * @attr anchor
     */
    anchor?: Element | string;
    /**
     * Which event triggers will show the tooltip.
     * Expects a comma separate string of different event triggers.
     *
     * @attr show-triggers
     * @default pointerenter
     */
    set showTriggers(value: string);
    get showTriggers(): string;
    /**
     * Which event triggers will hide the tooltip.
     * Expects a comma separate string of different event triggers.
     *
     * @attr hide-triggers
     * @default pointerleave, click
     */
    set hideTriggers(value: string);
    get hideTriggers(): string;
    /**
     * Specifies the number of milliseconds that should pass before showing the tooltip.
     *
     * @attr show-delay
     * @default 200
     */
    set showDelay(value: number);
    get showDelay(): number;
    /**
     * Specifies the number of milliseconds that should pass before hiding the tooltip.
     *
     * @attr hide-delay
     * @default 300
     */
    set hideDelay(value: number);
    get hideDelay(): number;
    /**
     * Specifies a plain text as tooltip content.
     *
     * @attr message
     */
    message: string;
    /**
     * Specifies if the tooltip remains visible until the user closes it via the close button or Esc key.
     *
     * @attr sticky
     * @default false
     */
    sticky: boolean;
    constructor();
    protected firstUpdated(): void;
    protected willUpdate(changedProperties: PropertyValues<this>): void;
    private _emitEvent;
    private _applyTooltipState;
    /**
     *  Shows the tooltip if not already showing.
     *  If a target is provided, sets it as a transient anchor.
     */
    show(target?: Element | string): Promise<boolean>;
    /** Hides the tooltip if not already hidden. */
    hide(): Promise<boolean>;
    /** Toggles the tooltip between shown/hidden state */
    toggle(): Promise<boolean>;
    protected _showWithEvent(): Promise<boolean>;
    protected _hideWithEvent(): Promise<boolean>;
    private _showOnInteraction;
    private _stopTimeoutAndAnimation;
    private _setAutoHide;
    private _hideOnInteraction;
    private _hideOnEscape;
    protected render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'igc-tooltip': IgcTooltipComponent;
    }
}
export {};