@engie-group/fluid-design-system
Version:
The Fluid Design System is ENGIE’s open-source library to create, build and deliver ENGIE digital services in a more efficient way.
104 lines (103 loc) • 4.03 kB
TypeScript
import { Side } from '@floating-ui/dom';
export interface ITooltipOptions {
/**
* Whether the tooltip has an arrow
*/
hasArrow?: boolean;
/**
* Whether the color is inverse
* @example: On spotlight context
*/
isColorInverse?: boolean;
/**
* On which side of the trigger, the tooltip should be attached
*/
placement?: Side;
/**
* Whether the provided string content should be interpreted as HTML.
* Prefer passing content as HTMLElement when possible instead
*/
isContentHtml?: boolean;
}
export declare class Tooltip {
private _isDisplayed;
readonly anchorElement: HTMLElement;
private readonly anchorParentElement;
private tooltipElement;
private arrowElement;
private innerElement;
private cleanupFunction?;
private options;
constructor(anchorElement: HTMLElement, content?: string | HTMLElement, options?: ITooltipOptions);
/**
* Generate a tooltip element without any display logic
*/
private createTooltipElement;
private getOptionsFromDataset;
/**
* Update tooltip classes to reflect desired options
* @param options The options to customize the tooltip
*/
private updateTooltipModifiers;
/**
* Display the tooltip. Make sure to `hide()` it when no longer needed.
*/
show(): void;
/**
* Hide the tooltip
*/
hide(): void;
/**
* Update tooltip content
* @param content The content of the tooltip, it can be a string or an {@link HTMLElement}
* @param isContentHTML Whether the provided string content should be interpreted as HTML,
* prefer passing content as HTMLElement when possible instead.
* Default to `false`.
*/
setContent(content: string | HTMLElement, isContentHTML?: boolean): void;
/**
* Update tooltip options
* @param options
*/
updateOptions(options: Omit<ITooltipOptions, 'isContentHtml'>): void;
}
/**
* Initialize a tooltip anchored to an {@link HTMLElement}
*
* @param anchorElement The anchor element on which the tooltip will be attached
* @param content The content of the tooltip, it can be a string or an {@link HTMLElement}.
* If not set, and no `data-tooltip-content` attribute is set to the anchor element, no tooltip will be rendered.
* @param options The {@link ITooltipOptions} options to customize the generated tooltip.
*
* @return The tooltip reference for further manipulation
*/
export declare const njTooltip: (anchorElement: HTMLElement, content?: string | HTMLElement, options?: ITooltipOptions) => Tooltip;
/**
* Initialize all tooltip anchor matching query selector on given element.
*
* @param element Parent element on which we will apply query selection. Default to `document.body`
* @param querySelector Query selector of your tooltip anchors. Default to `[data-toggle="tooltip"]`
*
* @return The initialized tooltip element references and a function to unmount them all
*/
export declare const initAllTooltips: (element?: HTMLElement, querySelector?: string) => {
tooltips: Tooltip[];
unmount: () => void;
};
/**
* Attach listeners to focus and hover events to toggle tooltip
* @param tooltip The tooltip which will be displayed
* @param triggerElement The element on which would be attached event listeners. Default to tooltip anchor
* @return Dismount function to remove event listeners, should be called before disposing the tooltip
*/
export declare const displayTooltipOnHoverAndFocus: (tooltip: Tooltip, triggerElement?: HTMLElement) => (() => void);
declare const _default: {
njTooltip: (anchorElement: HTMLElement, content?: string | HTMLElement, options?: ITooltipOptions) => Tooltip;
initAllTooltips: (element?: HTMLElement, querySelector?: string) => {
tooltips: Tooltip[];
unmount: () => void;
};
Tooltip: typeof Tooltip;
displayTooltipOnHoverAndFocus: (tooltip: Tooltip, triggerElement?: HTMLElement) => () => void;
};
export default _default;