1 | import * as React from 'react';
|
2 | import { StandardProps } from '..';
|
3 | import { TransitionProps } from '../transitions/transition';
|
4 | import { PopperProps } from '../Popper/Popper';
|
5 |
|
6 | export interface TooltipProps
|
7 | extends StandardProps<React.HTMLAttributes<HTMLDivElement>, TooltipClassKey, 'title'> {
|
8 | /**
|
9 | * If `true`, adds an arrow to the tooltip.
|
10 | */
|
11 | arrow?: boolean;
|
12 | /**
|
13 | * Tooltip reference element.
|
14 | */
|
15 | children: React.ReactElement<any, any>;
|
16 | /**
|
17 | * Do not respond to focus events.
|
18 | */
|
19 | disableFocusListener?: boolean;
|
20 | /**
|
21 | * Do not respond to hover events.
|
22 | */
|
23 | disableHoverListener?: boolean;
|
24 | /**
|
25 | * Do not respond to long press touch events.
|
26 | */
|
27 | disableTouchListener?: boolean;
|
28 | /**
|
29 | * The number of milliseconds to wait before showing the tooltip.
|
30 | * This prop won't impact the enter touch delay (`enterTouchDelay`).
|
31 | */
|
32 | enterDelay?: number;
|
33 | /**
|
34 | * The number of milliseconds to wait before showing the tooltip when one was already recently opened.
|
35 | */
|
36 | enterNextDelay?: number;
|
37 | /**
|
38 | * The number of milliseconds a user must touch the element before showing the tooltip.
|
39 | */
|
40 | enterTouchDelay?: number;
|
41 | /**
|
42 | * This prop is used to help implement the accessibility logic.
|
43 | * If you don't provide this prop. It falls back to a randomly generated id.
|
44 | */
|
45 | id?: string;
|
46 | /**
|
47 | * Makes a tooltip interactive, i.e. will not close when the user
|
48 | * hovers over the tooltip before the `leaveDelay` is expired.
|
49 | */
|
50 | interactive?: boolean;
|
51 | /**
|
52 | * The number of milliseconds to wait before hiding the tooltip.
|
53 | * This prop won't impact the leave touch delay (`leaveTouchDelay`).
|
54 | */
|
55 | leaveDelay?: number;
|
56 | /**
|
57 | * The number of milliseconds after the user stops touching an element before hiding the tooltip.
|
58 | */
|
59 | leaveTouchDelay?: number;
|
60 | /**
|
61 | * Callback fired when the component requests to be closed.
|
62 | *
|
63 | * @param {object} event The event source of the callback.
|
64 | */
|
65 | onClose?: (event: React.ChangeEvent<{}>) => void;
|
66 | /**
|
67 | * Callback fired when the component requests to be open.
|
68 | *
|
69 | * @param {object} event The event source of the callback.
|
70 | */
|
71 | onOpen?: (event: React.ChangeEvent<{}>) => void;
|
72 | /**
|
73 | * If `true`, the tooltip is shown.
|
74 | */
|
75 | open?: boolean;
|
76 | /**
|
77 | * Tooltip placement.
|
78 | */
|
79 | placement?:
|
80 | | 'bottom-end'
|
81 | | 'bottom-start'
|
82 | | 'bottom'
|
83 | | 'left-end'
|
84 | | 'left-start'
|
85 | | 'left'
|
86 | | 'right-end'
|
87 | | 'right-start'
|
88 | | 'right'
|
89 | | 'top-end'
|
90 | | 'top-start'
|
91 | | 'top';
|
92 | /**
|
93 | * The component used for the popper.
|
94 | */
|
95 | PopperComponent?: React.ComponentType<PopperProps>;
|
96 | /**
|
97 | * Props applied to the [`Popper`](/api/popper/) element.
|
98 | */
|
99 | PopperProps?: Partial<PopperProps>;
|
100 | /**
|
101 | * Tooltip title. Zero-length titles string are never displayed.
|
102 | */
|
103 | title: NonNullable<React.ReactNode>;
|
104 | /**
|
105 | * The component used for the transition.
|
106 | * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
|
107 | */
|
108 | TransitionComponent?: React.ComponentType<
|
109 | TransitionProps & { children?: React.ReactElement<any, any> }
|
110 | >;
|
111 | /**
|
112 | * Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element.
|
113 | */
|
114 | TransitionProps?: TransitionProps;
|
115 | }
|
116 |
|
117 | export type TooltipClassKey =
|
118 | | 'popper'
|
119 | | 'popperInteractive'
|
120 | | 'popperArrow'
|
121 | | 'tooltip'
|
122 | | 'tooltipArrow'
|
123 | | 'arrow'
|
124 | | 'touch'
|
125 | | 'tooltipPlacementLeft'
|
126 | | 'tooltipPlacementRight'
|
127 | | 'tooltipPlacementTop'
|
128 | | 'tooltipPlacementBottom';
|
129 |
|
130 | /**
|
131 | *
|
132 | * Demos:
|
133 | *
|
134 | * - [Tooltips](https://material-ui.com/components/tooltips/)
|
135 | *
|
136 | * API:
|
137 | *
|
138 | * - [Tooltip API](https://material-ui.com/api/tooltip/)
|
139 | */
|
140 | export default function Tooltip(props: TooltipProps): JSX.Element;
|