office-ui-fabric-react/lib-commonjs/components/Tooltip/TooltipHost.types.d.ts

Reusable React components for building experiences for Office 365.

import * as React from 'react';
import { TooltipHostBase } from './TooltipHost.base';
import { TooltipDelay, ITooltipProps } from './Tooltip.types';
import { ICalloutProps } from '../../Callout';
import { DirectionalHint } from '../../common/DirectionalHint';
import { IRefObject, IStyleFunctionOrObject } from '../../Utilities';
import { IStyle, ITheme } from '../../Styling';
/**
 * {@docCategory Tooltip}
 */
export interface ITooltipHost {
    /**
     * Shows the tooltip.
     */
    show: () => void;
    /**
     * Dismisses the tooltip.
     */
    dismiss: () => void;
}
/**
 * {@docCategory Tooltip}
 */
export declare enum TooltipOverflowMode {
    /** Only show tooltip if parent DOM element is overflowing */
    Parent = 0,
    /** Only show tooltip if tooltip host's content is overflowing */
    Self = 1
}
/**
 * Tooltip component props.
 * {@docCategory Tooltip}
 */
export interface ITooltipHostProps extends React.HTMLAttributes<HTMLDivElement | TooltipHostBase> {
    /**
     * Optional callback to access the ITooltipHost interface. Use this instead of ref for accessing
     * the public methods and properties of the component.
     */
    componentRef?: IRefObject<ITooltipHost>;
    /**
     * Additional properties to pass through for Callout, reference detail properties in ICalloutProps
     */
    calloutProps?: ICalloutProps;
    /**
     * Optionally a number of milliseconds to delay closing the tooltip, so that
     * the user has time to hover over the tooltip and interact with it. Hovering
     * over the tooltip will count as hovering over the host, so that the tooltip
     * will stay open if the user is actively interacting with it.
     */
    closeDelay?: number;
    /**
     *  Content to be passed to the tooltip
     */
    content?: string | JSX.Element | JSX.Element[];
    /**
     * Length of delay
     * @defaultvalue medium
     */
    delay?: TooltipDelay;
    /**
     * Indicator of how the tooltip should be anchored to its targetElement.
     */
    directionalHint?: DirectionalHint;
    /**
     * How the element should be positioned in RTL layouts.
     * If not specified, a mirror of `directionalHint` will be used instead
     */
    directionalHintForRTL?: DirectionalHint;
    /**
     * Optional class name to apply to tooltip host.
     */
    hostClassName?: string;
    /**
     * Only show if there is overflow. If set, the tooltip hosts observes  and only shows the tooltip if this element has overflow.
     * It also uses the parent as target element for the tooltip.
     */
    overflowMode?: TooltipOverflowMode;
    /**
     * Whether or not to mark the container as described by the tooltip.
     * If not specified, the caller should mark as element as described by the tooltip id.
     */
    setAriaDescribedBy?: boolean;
    /**
     * Additional properties to pass through for Tooltip, reference detail properties in ITooltipProps
     */
    tooltipProps?: ITooltipProps;
    /**
     * Call to provide customized styling that will layer on top of the variant rules.
     */
    styles?: IStyleFunctionOrObject<ITooltipHostStyleProps, ITooltipHostStyles>;
    /**
     * Theme provided by High-Order Component.
     */
    theme?: ITheme;
    /**
     * Notifies when tooltip becomes visible or hidden, whatever the trigger was.
     */
    onTooltipToggle?(isTooltipVisible: boolean): void;
}
/**
 * {@docCategory Tooltip}
 */
export interface ITooltipHostStyleProps {
    /**
     * Accept theme prop.
     */
    theme: ITheme;
    /**
     * Accept optional classNames for the host wrapper
     */
    className?: string;
}
/**
 * {@docCategory Tooltip}
 */
export interface ITooltipHostStyles {
    /**
     * Style for the host wrapper element.
     */
    root: IStyle;
}