/
TooltipsPage.js
156 lines (153 loc) · 5.91 KB
/
TooltipsPage.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
import React from 'react';
import { PrismCode } from 'react-prism';
import PageTitle from '../UI/PageTitle';
import SectionTitle from '../UI/SectionTitle';
import TooltipExample from '../examples/Tooltip';
const TooltipExampleSource = require('!!raw-loader!../examples/Tooltip');
import TooltipAutoHideExample from '../examples/TooltipAutoHide';
const TooltipExampleAutoHideSource = require('!!raw-loader!../examples/TooltipAutoHide');
import TooltipExampleMulti from '../examples/TooltipMulti';
const TooltipExampleMultiSource = require('!!raw-loader!../examples/TooltipMulti');
import TooltipExampleUncontrolled from '../examples/TooltipUncontrolled';
const TooltipExampleUncontrolledSource = require('!!raw-loader!../examples/TooltipUncontrolled');
import TooltipScheduleUpdateExample from '../examples/TooltipScheduleUpdate';
const TooltipScheduleUpdateExampleSource = require('!!raw-loader!../examples/TooltipScheduleUpdate');
export default class TooltipsPage extends React.Component {
render() {
return (
<div>
<PageTitle title="Tooltips" />
<p>Tooltips are built with <a href="https://popper.js.org/">https://popper.js.org/</a> via <a href="https://github.com/souporserious/react-popper">https://github.com/souporserious/react-popper</a>.</p>
<div className="docs-example">
<TooltipExample />
</div>
<pre>
<PrismCode className="language-jsx">
{TooltipExampleSource}
</PrismCode>
</pre>
<h4>Properties</h4>
<pre>
<PrismCode className="language-jsx">
{`Tooltip.propTypes = {
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
// space separated list of triggers (e.g. "click hover focus")
trigger: PropTypes.string,
// boundaries for popper, can be scrollParent, window, viewport, or any DOM element
boundariesElement: PropTypes.oneOfType([PropTypes.string, DOMElement]),
// boolean to control the state of the tooltip
isOpen: PropTypes.bool,
hideArrow: PropTypes.bool,
// callback for toggling isOpen in the controlling component. It will receive an object with info about the event that triggered it
toggle: PropTypes.func,
// target element or element ID, popover is attached to this element
target: PropTypes.oneOfType([
PropTypes.string,
PropTypes.func,
DOMElement, // instanceof Element (https://developer.mozilla.org/en-US/docs/Web/API/Element)
]).isRequired,
// Where to inject the popper DOM node, default to body
container: PropTypes.oneOfType([PropTypes.string, PropTypes.func, DOMElement]),
// optionally override show/hide delays - default { show: 0, hide: 50 }
delay: PropTypes.oneOfType([
PropTypes.shape({ show: PropTypes.number, hide: PropTypes.number }),
PropTypes.number
]),
className: PropTypes.string,
// Apply class to the popper component
popperClassName: PropTypes.string,
// Apply class to the inner-tooltip
innerClassName: PropTypes.string,
// Apply class to the arrow-tooltip ('arrow' by default)
arrowClassName: PropTypes.string,
// optionally hide tooltip when hovering over tooltip content - default true
autohide: PropTypes.bool,
// convenience attachments for popover
placement: PropTypes.oneOf([
'auto',
'auto-start',
'auto-end',
'top',
'top-start',
'top-end',
'right',
'right-start',
'right-end',
'bottom',
'bottom-start',
'bottom-end',
'left',
'left-start',
'left-end',
]),
// Custom modifiers that are passed to Popper.js, see https://popper.js.org/popper-documentation.html#modifiers
modifiers: PropTypes.object,
offset: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
]),
// Custom ref handler that will be assigned to the "ref" of the <div> wrapping the tooltip elements
innerRef: PropTypes.oneOfType([
PropTypes.func,
PropTypes.string,
PropTypes.object
]),
// Whether to show/hide the popover with a fade effect
// (default: true)
fade: PropTypes.bool,
// Whether to flip the direction of the popover if too close to
// the container edge
// (default: true)
flip: PropTypes.bool,
}`}
</PrismCode>
</pre>
<SectionTitle>Tooltip Disable Autohide</SectionTitle>
<div className="docs-example">
<TooltipAutoHideExample />
</div>
<pre>
<PrismCode className="language-jsx">
{TooltipExampleAutoHideSource}
</PrismCode>
</pre>
<SectionTitle>Tooltips List</SectionTitle>
<div className="docs-example">
<TooltipExampleMulti />
</div>
<pre>
<PrismCode className="language-jsx">
{TooltipExampleMultiSource}
</PrismCode>
</pre>
<SectionTitle>Uncontrolled Tooltip</SectionTitle>
<p>
For the most basic use-case an uncontrolled component can provide the functionality wanted without the need to manage/control the state of the component. <code>UncontrolledTooltip</code> does not require <code>isOpen</code> nor <code>toggle</code> props to work.
</p>
<div className="docs-example">
<TooltipExampleUncontrolled />
</div>
<pre>
<PrismCode className="language-jsx">
{TooltipExampleUncontrolledSource}
</PrismCode>
</pre>
<SectionTitle>Repositioning Tooltips</SectionTitle>
<p>
If you need to reposition a tooltip due to content changes or target placement changes, use
the <code>scheduleUpdate</code> function to manually reposition it. This function is exposed
as a render prop for <code>children</code>.
</p>
<div className="docs-example">
<TooltipScheduleUpdateExample />
</div>
<pre>
<PrismCode className="language-jsx">
{TooltipScheduleUpdateExampleSource}
</PrismCode>
</pre>
</div>
);
}
}