@mantine/core/lib/src/components/Tooltip/Tooltip.d.ts

React components library focused on usability, accessibility and developer experience

import React from 'react';
import { DefaultProps } from '../../theme';
import { ArrowBodyPosition, ArrowBodyPlacement } from '../ArrowBody/ArrowBody';
import { MantineTransition } from '../Transition/Transition';
import useStyles from './Tooltip.styles';
export declare type TooltipStylesNames = keyof ReturnType<typeof useStyles>;
export interface TooltipProps extends DefaultProps<TooltipStylesNames>, React.ComponentPropsWithoutRef<'div'> {
    /** Tooltip content */
    label: React.ReactNode;
    /** Any react node that should trigger tooltip */
    children: React.ReactNode;
    /** Tooltip opened state for controlled variant */
    opened?: boolean;
    /** Close delay in ms, 0 to disable delay */
    delay?: number;
    /** Any color from theme.colors, defaults to gray in light color scheme and dark in dark colors scheme */
    color?: string;
    /** Space between tooltip and element in px */
    gutter?: number;
    /** True to disable tooltip */
    disabled?: boolean;
    /** Adds arrow, arrow position depends on position and placement props */
    withArrow?: boolean;
    /** Arrow size in px */
    arrowSize?: number;
    /** Tooltip position relative to children */
    position?: ArrowBodyPosition;
    /** Tooltip placement relative to children */
    placement?: ArrowBodyPlacement;
    /** Tooltip z-index */
    zIndex?: number;
    /** Tooltip width in px or auto */
    width?: number | 'auto';
    /** Allow multiline tooltip content */
    wrapLines?: boolean;
    /** Allow pointer events on tooltip, warning: this may break some animations */
    allowPointerEvents?: boolean;
    /** Customize mount/unmount transition */
    transition?: MantineTransition;
    /** Mount/unmount transition duration in ms */
    transitionDuration?: number;
    /** Mount/unmount transition timing function, defaults to theme.transitionTimingFunction */
    transitionTimingFunction?: string;
    /** Get wrapper ref */
    elementRef?: React.ForwardedRef<HTMLDivElement>;
    /** Get tooltip ref */
    tooltipRef?: React.ForwardedRef<HTMLDivElement>;
    /** Tooltip id to bind aria-describedby */
    tooltipId?: string;
}
export declare function Tooltip({ className, style, themeOverride, label, children, opened, delay, gutter, color, disabled, withArrow, arrowSize, position, placement, transition, transitionDuration, zIndex, transitionTimingFunction, width, wrapLines, allowPointerEvents, elementRef, tooltipRef, tooltipId, classNames, styles, ...others }: TooltipProps): JSX.Element;
export declare namespace Tooltip {
    var displayName: string;
}
//# sourceMappingURL=Tooltip.d.ts.map