@financial-times/o3-tooltip/index.d.ts

Provides a viewport-aware tooltip for annotating or or highlighting other aspects of a product's UI

import { Instance } from '@popperjs/core';

type TooltipProps = {
    id?: string;
    content: string;
    title?: string;
    placement: 'top' | 'right' | 'bottom' | 'left';
    onClose?: () => void;
};
interface OnboardingToolTipProps extends Omit<TooltipProps, 'placement'> {
    contentId: string;
    targetId: string;
    placement: 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end';
}
interface ToggleToolTipProps extends TooltipProps {
    infoLabel?: string;
}
declare global {
    namespace JSX {
        interface IntrinsicElements {
            'o3-tooltip-onboarding': any;
            'o3-tooltip-toggle': any;
        }
    }
}

declare class ToolTip extends HTMLElement implements TooltipProps {
    contentId: string;
    targetId: string;
    protected _popperInstance?: Instance;
    protected _targetNode: HTMLElement;
    protected _isToggleTooltip: boolean;
    private _mutationObserver?;
    private _resizeObserver?;
    constructor();
    static get observedAttributes(): string[];
    get placement(): TooltipProps["placement"];
    set placement(value: TooltipProps["placement"]);
    get title(): string;
    set title(value: string);
    get content(): string;
    set content(value: string);
    connectedCallback(): void;
    attributeChangedCallback(name: string): void;
    disconnectedCallback(): void;
    update(): Promise<void>;
    forceUpdate(): void;
    protected render(name?: string): void;
    protected initialisePopper(targetNode: HTMLElement, popperElement: HTMLElement): Instance;
}

declare class OnboardingToolTip extends ToolTip implements OnboardingToolTipProps {
    private _closeButton;
    private _onClose?;
    connectedCallback(): void;
    disconnectedCallback(): void;
    private _clickHandler;
    private _addEventListeners;
    private _removeEventListeners;
    private getTargetNode;
    set onClose(callback: () => void);
    _generateMarkup(title: string, content: string, contentId: string): string;
}
declare global {
    interface HTMLElementTagNameMap {
        'o3-tooltip-onboarding': OnboardingToolTip;
    }
}

declare class ToggleToolTip extends ToolTip implements ToggleToolTipProps {
    private _contentWrapper;
    private _liveRegionEl;
    infoLabel: string;
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    private _clickHandler;
    private _closeOnOutsideClick;
    private _closeOnEsc;
    private _cleanUp;
    private _addContentInLiveRegion;
    private _removeContentInLiveRegion;
    private _addEventListeners;
    private _removeEventListeners;
    _generateMarkup(infoLabel: string): string;
}
declare global {
    interface HTMLElementTagNameMap {
        'o3-tooltip-toggle': ToggleToolTip;
    }
}