wix-style-react/dist/src/Tooltip/Tooltip.types.d.ts

wix-style-react

import React from 'react';
import { Placement, AppendTo, PopoverProps } from '../Popover/Popover.types';
export type TooltipTextAlign = 'center' | 'start';
export type TooltipSize = 'small' | 'medium';
export interface TooltipChildrenProps {
    onFocus: (event: React.MouseEvent, handlers?: {
        focus: () => void;
        blur: () => void;
    }) => void;
    onBlur: (event: React.MouseEvent, handlers?: {
        blur: () => void;
    }) => void;
}
export interface TooltipProps {
    /** Applies a data-hook HTML attribute to be used in the tests */
    dataHook?: string;
    /** Applies a CSS class to the component’s root element */
    className?: string;
    /** Defines tooltip’s trigger element */
    children: React.ReactNode | React.FC<TooltipChildrenProps>;
    /** Defines the content to be shown inside a tooltip */
    content?: React.ReactNode;
    /** Allows showing a tooltip when hovering on a disabled trigger element with mouse */
    disabled?: boolean;
    /** Controls the alignment of tooltip’s content */
    textAlign?: TooltipTextAlign;
    /** Sets time to wait before showing the tooltip (in milliseconds) */
    enterDelay?: number;
    /** Sets time to wait before hiding the tooltip (in milliseconds) */
    exitDelay?: number;
    /** Moves a tooltip in relation to its trigger element on x or y axis */
    moveBy?: PopoverProps['moveBy'];
    /** Moves a tooltip’s arrow by a defined amount */
    moveArrowTo?: number;
    /**
     * Calculates tooltip’s position in relation to a DOM element.
     * Can be either: 'window', 'scrollParent', 'viewport', 'parent', element or
     * function based predicate. I.e., (elm) => elm.getAttribute('data-hook') === 'value
     */
    appendTo?: AppendTo;
    /** Flips a tooltip’s placement when it starts to overlap its trigger element */
    flip?: boolean;
    /** Enables keeping a tooltip at its original placement even when it is being positioned outside the boundary */
    fixed?: boolean;
    /** Defines max width of a tooltip in px. If content is wider than maxWidth allows, it wraps into multiple lines.
     * @linkTypeTo https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
     */
    maxWidth?: React.CSSProperties['maxWidth'];
    /** Defines a callback function on tooltip’s show event */
    onShow?: () => void;
    /** Defines a callback function on tooltip’s hide event */
    onHide?: () => void;
    /** Sets tooltip’s placement in relation to its trigger element */
    placement?: Placement;
    /** Controls the size of a tooltip */
    size?: TooltipSize;
    /** Controls the tooltip’s z-index */
    zIndex?: number;
    /** Stretches the root element to the width of its container */
    fluid?: boolean;
    /** Connects tooltip’s trigger element to tooltip’s label content for assistive technologies.
     * Use this when the action doesn't have any visual text content, i.e. Icon Button.
     * Currently only one, either aria-labelledby or aria-describedby is supported.
     * If both are provided aria-labelledby takes priority.
     */
    'aria-labelledby'?: string;
    /** Connects tooltip’s trigger element to tooltip’s descriptive content for assistive technologies.
     * Use this when you want to provide information in addition to actions visual information, i.e. TextButton.
     * Currently only one, either aria-labelledby or aria-describedby is supported.
     * If both are provided aria-labelledby takes priority.
     */
    'aria-describedby'?: string;
    /**
     * Enables inline-block behaviour for the tooltip trigger element.
     * Use this when working with inline based elements i.e. Text, TextButton, Button etc.
     */
    inline?: boolean;
}
export type TooltipActions = {
    open: () => void;
    close: () => void;
};
//# sourceMappingURL=Tooltip.types.d.ts.map