@fluentui/react-northstar
Version:
A themable React component library.
55 lines (54 loc) • 2.55 kB
TypeScript
import { Accessibility, TooltipBehaviorProps } from '@fluentui/accessibility';
import * as React from 'react';
import { ChildrenComponentProps, ContentComponentProps, StyledComponentProps } from '../../utils';
import { ShorthandValue, FluentComponentStaticProps } from '../../types';
import { PositioningProps } from '../../utils/positioner';
import { TooltipContent, TooltipContentProps } from './TooltipContent';
export interface TooltipProps extends StyledComponentProps<TooltipProps>, ChildrenComponentProps<React.ReactElement>, ContentComponentProps<ShorthandValue<TooltipContentProps>>, PositioningProps {
/**
* Accessibility behavior if overridden by the user.
* @default tooltipBehavior
* @available tooltipAsLabelBehavior
* */
accessibility?: Accessibility<TooltipBehaviorProps>;
/** Additional CSS class name(s) to apply. */
className?: string;
/** Initial value for 'open'. */
defaultOpen?: boolean;
/** Existing element the tooltip should be bound to. */
mountNode?: HTMLElement;
/** Delay in ms for the mouse leave event, before the tooltip will be closed. */
mouseLeaveDelay?: number;
/** Defines whether tooltip is displayed. */
open?: boolean;
/** Defines wether tooltip is subtle */
subtle?: boolean;
/**
* Event for request to change 'open' value.
* @param event - React's original SyntheticEvent.
* @param data - All props and proposed value.
*/
onOpenChange?: (e: React.MouseEvent | React.FocusEvent | React.KeyboardEvent, data: TooltipProps) => void;
/** A tooltip can show a pointer to trigger. */
pointing?: boolean;
/**
* DOM element that should be used as tooltip's target - instead of 'trigger' element that is used by default.
*/
target?: HTMLElement;
/** Element to be rendered in-place where the tooltip is defined. */
trigger?: JSX.Element;
dismissOnContentMouseEnter?: boolean;
/** Delay in ms for the mouse enter event, before the tooltip will be open. */
mouseEnterDelay?: number;
}
export declare const tooltipClassName = "ui-tooltip";
/**
* A Tooltip displays additional non-modal information on top of its target element.
* Tooltip doesn't receive focus and cannot contain focusable elements.
*
* @accessibility
* Implements [ARIA Tooltip](https://www.w3.org/TR/wai-aria-practices-1.1/#tooltip) design pattern.
*/
export declare const Tooltip: React.FC<TooltipProps> & FluentComponentStaticProps<TooltipProps> & {
Content: typeof TooltipContent;
};