Skip to content

Commit 15ef349

Browse files
danielbariondanielbarion
committed
docs: update docs to match the next version of react-tooltip
1 parent a0e1c20 commit 15ef349

18 files changed

+172
-313
lines changed

‎docs/docs/examples/anchor-select.mdx

Lines changed: 13 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ sidebar_position: 1
77
Using the ReactTooltip anchor select prop.
88

99
import { Tooltip } from 'react-tooltip'
10-
import 'react-tooltip/dist/react-tooltip.css'
1110

1211
export const TooltipAnchor = ({ children, id, ...rest }) => {
1312
return (
@@ -48,7 +47,6 @@ A CSS selector for a specific id begins with a `#`. Don't forget to put it befor
4847

4948
```jsx
5049
import { Tooltip } from 'react-tooltip';
51-
import 'react-tooltip/dist/react-tooltip.css';
5250

5351
<a id="my-anchor-element-id">◕‿‿◕</a>
5452
<Tooltip
@@ -59,10 +57,7 @@ import 'react-tooltip/dist/react-tooltip.css';
5957
```
6058

6159
<TooltipAnchor id="my-anchor-element-id">◕‿‿◕</TooltipAnchor>
62-
<Tooltip
63-
anchorSelect="#my-anchor-element-id"
64-
content="Hello world!"
65-
/>
60+
<Tooltip anchorSelect="#my-anchor-element-id" content="Hello world!" />
6661

6762
#### Using class attribute
6863

@@ -74,7 +69,6 @@ A CSS selector for a specific id begins with a `.`. Don't forget to put it befor
7469

7570
```jsx
7671
import { Tooltip } from 'react-tooltip';
77-
import 'react-tooltip/dist/react-tooltip.css';
7872

7973
<a className="my-anchor-element-class">◕‿‿◕</a>
8074
<a className="my-anchor-element-class">◕‿‿◕</a>
@@ -88,23 +82,12 @@ import 'react-tooltip/dist/react-tooltip.css';
8882
```
8983

9084
<div style={{ display: 'flex', gap: '5px', width: 'fit-content', margin: 'auto' }}>
91-
<TooltipAnchor className="my-anchor-element-class">
92-
◕‿‿◕
93-
</TooltipAnchor>
94-
<TooltipAnchor className="my-anchor-element-class">
95-
◕‿‿◕
96-
</TooltipAnchor>
97-
<TooltipAnchor className="my-anchor-element-class">
98-
◕‿‿◕
99-
</TooltipAnchor>
100-
<TooltipAnchor className="my-anchor-element-class">
101-
◕‿‿◕
102-
</TooltipAnchor>
85+
<TooltipAnchor className="my-anchor-element-class">◕‿‿◕</TooltipAnchor>
86+
<TooltipAnchor className="my-anchor-element-class">◕‿‿◕</TooltipAnchor>
87+
<TooltipAnchor className="my-anchor-element-class">◕‿‿◕</TooltipAnchor>
88+
<TooltipAnchor className="my-anchor-element-class">◕‿‿◕</TooltipAnchor>
10389
</div>
104-
<Tooltip
105-
anchorSelect=".my-anchor-element-class"
106-
content="Hello world!"
107-
/>
90+
<Tooltip anchorSelect=".my-anchor-element-class" content="Hello world!" />
10891

10992
### Complex selectors
11093

@@ -122,7 +105,6 @@ This example uses the name attribute, but it works for any HTML attribute (id, c
122105

123106
```jsx
124107
import { Tooltip } from 'react-tooltip';
125-
import 'react-tooltip/dist/react-tooltip.css';
126108

127109
<a name="my-anchor-element-1">◕‿‿◕</a>
128110
<a name="my-anchor-element-2">◕‿‿◕</a>
@@ -135,23 +117,12 @@ import 'react-tooltip/dist/react-tooltip.css';
135117
```
136118

137119
<div style={{ display: 'flex', gap: '5px', width: 'fit-content', margin: 'auto' }}>
138-
<TooltipAnchor name="my-anchor-element-1">
139-
◕‿‿◕
140-
</TooltipAnchor>
141-
<TooltipAnchor name="my-anchor-element-2">
142-
◕‿‿◕
143-
</TooltipAnchor>
144-
<TooltipAnchor name="my-anchor-element-3">
145-
◕‿‿◕
146-
</TooltipAnchor>
147-
<TooltipAnchor name="my-anchor-element-4">
148-
◕‿‿◕
149-
</TooltipAnchor>
120+
<TooltipAnchor name="my-anchor-element-1">◕‿‿◕</TooltipAnchor>
121+
<TooltipAnchor name="my-anchor-element-2">◕‿‿◕</TooltipAnchor>
122+
<TooltipAnchor name="my-anchor-element-3">◕‿‿◕</TooltipAnchor>
123+
<TooltipAnchor name="my-anchor-element-4">◕‿‿◕</TooltipAnchor>
150124
</div>
151-
<Tooltip
152-
anchorSelect="[name^='my-anchor-element-']"
153-
content="Hello world!"
154-
/>
125+
<Tooltip anchorSelect="[name^='my-anchor-element-']" content="Hello world!" />
155126

156127
#### Child selector
157128

@@ -165,7 +136,6 @@ Often you can just use a class selector or something else much simpler.
165136

166137
```jsx
167138
import { Tooltip } from 'react-tooltip';
168-
import 'react-tooltip/dist/react-tooltip.css';
169139

170140
<section id="section-anchor-select" style={{ marginTop: '100px' }}>
171141
<a>◕‿‿◕</a>
@@ -183,7 +153,7 @@ import 'react-tooltip/dist/react-tooltip.css';
183153
/>
184154
```
185155

186-
<section
156+
<section
187157
id="section-anchor-select"
188158
style={{ display: 'flex', gap: '5px', width: 'fit-content', margin: 'auto' }}
189159
>
@@ -199,4 +169,4 @@ import 'react-tooltip/dist/react-tooltip.css';
199169
<Tooltip
200170
anchorSelect="section[id='section-anchor-select'] > span:nth-child(even)"
201171
content="I am an even child!"
202-
/>
172+
/>

‎docs/docs/examples/basic-examples.mdx

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ sidebar_position: 0
77
Some basic examples of how to use the ReactTooltip component.
88

99
import { Tooltip } from 'react-tooltip'
10-
import 'react-tooltip/dist/react-tooltip.css'
1110

1211
export const TooltipAnchor = ({ children, id, ...rest }) => {
1312
return (
@@ -38,7 +37,6 @@ export const TooltipAnchor = ({ children, id, ...rest }) => {
3837

3938
```jsx
4039
import { Tooltip } from 'react-tooltip';
41-
import 'react-tooltip/dist/react-tooltip.css';
4240

4341
<a data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!">
4442
◕‿‿◕
@@ -49,7 +47,15 @@ import 'react-tooltip/dist/react-tooltip.css';
4947
<Tooltip id="my-tooltip" />
5048
```
5149

52-
<div style={{ display: 'flex', flexDirection: 'row', width: 'fit-content', margin: 'auto', gap: '5px' }}>
50+
<div
51+
style={{
52+
display: 'flex',
53+
flexDirection: 'row',
54+
width: 'fit-content',
55+
margin: 'auto',
56+
gap: '5px',
57+
}}
58+
>
5359
<TooltipAnchor data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!">
5460
◕‿‿◕
5561
</TooltipAnchor>
@@ -61,25 +67,20 @@ import 'react-tooltip/dist/react-tooltip.css';
6167

6268
### Props
6369

64-
6570
#### Using anchor element `id`
6671

6772
```jsx
6873
import { Tooltip } from 'react-tooltip';
69-
import 'react-tooltip/dist/react-tooltip.css'
7074

7175
<a id="my-anchor-element">◕‿‿◕</a>
72-
<Tooltip
76+
<Tooltip
7377
anchorSelect="#my-anchor-element"
7478
content="Hello world!"
7579
/>
7680
```
7781

7882
<TooltipAnchor id="my-anchor-element">◕‿‿◕</TooltipAnchor>
79-
<Tooltip
80-
anchorSelect="#my-anchor-element"
81-
content="Hello world!"
82-
/>
83+
<Tooltip anchorSelect="#my-anchor-element" content="Hello world!" />
8384

8485
#### Using anchor elements `className`
8586

@@ -91,21 +92,25 @@ Check the [Anchor select examples](./anchor-select.mdx) for more complex use cas
9192

9293
```jsx
9394
import { Tooltip } from 'react-tooltip';
94-
import 'react-tooltip/dist/react-tooltip.css'
9595

9696
<a className="my-anchor-element">◕‿‿◕</a>
9797
<a className="my-anchor-element">◕‿‿◕</a>
98-
<Tooltip
98+
<Tooltip
9999
anchorSelect=".my-anchor-element"
100100
content="Hello world!"
101101
/>
102102
```
103103

104-
<div style={{ display: 'flex', flexDirection: 'row', width: 'fit-content', margin: 'auto', gap: '5px' }}>
104+
<div
105+
style={{
106+
display: 'flex',
107+
flexDirection: 'row',
108+
width: 'fit-content',
109+
margin: 'auto',
110+
gap: '5px',
111+
}}
112+
>
105113
<TooltipAnchor className="my-anchor-element">◕‿‿◕</TooltipAnchor>
106114
<TooltipAnchor className="my-anchor-element">◕‿‿◕</TooltipAnchor>
107115
</div>
108-
<Tooltip
109-
anchorSelect=".my-anchor-element"
110-
content="Hello world!"
111-
/>
116+
<Tooltip anchorSelect=".my-anchor-element" content="Hello world!" />

‎docs/docs/examples/children.mdx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ sidebar_position: 1
77
Using children for setting the ReactTooltip content.
88

99
import { Tooltip } from 'react-tooltip'
10-
import 'react-tooltip/dist/react-tooltip.css'
1110

1211
export const TooltipAnchor = ({ children, id, ...rest }) => {
1312
return (
@@ -41,7 +40,6 @@ This is useful for setting a placeholder for the tooltip content.
4140

4241
```jsx
4342
import { Tooltip } from 'react-tooltip';
44-
import 'react-tooltip/dist/react-tooltip.css';
4543

4644
<a data-tooltip-id="my-tooltip">◕‿‿◕</a>
4745
<Tooltip id="my-tooltip">

‎docs/docs/examples/content.mdx

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ sidebar_position: 1
77
Setting the ReactTooltip content.
88

99
import { Tooltip } from 'react-tooltip'
10-
import 'react-tooltip/dist/react-tooltip.css'
1110

1211
export const TooltipAnchor = ({ children, id, ...rest }) => {
1312
return (
@@ -34,12 +33,10 @@ export const TooltipAnchor = ({ children, id, ...rest }) => {
3433
)
3534
}
3635

37-
3836
### Using `data-tooltip-content` anchor element attribute
3937

4038
```jsx
4139
import { Tooltip } from 'react-tooltip';
42-
import 'react-tooltip/dist/react-tooltip.css';
4340

4441
<a
4542
data-tooltip-id="my-tooltip"
@@ -50,10 +47,7 @@ import 'react-tooltip/dist/react-tooltip.css';
5047
<Tooltip id="my-tooltip" />
5148
```
5249

53-
<TooltipAnchor
54-
data-tooltip-id="my-tooltip"
55-
data-tooltip-content="Hello world!"
56-
>
50+
<TooltipAnchor data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!">
5751
◕‿‿◕
5852
</TooltipAnchor>
5953
<Tooltip id="my-tooltip" />
@@ -62,17 +56,13 @@ import 'react-tooltip/dist/react-tooltip.css';
6256

6357
```jsx
6458
import { Tooltip } from 'react-tooltip';
65-
import 'react-tooltip/dist/react-tooltip.css';
6659

6760
<a id="my-anchor-element">◕‿‿◕</a>
68-
<Tooltip
61+
<Tooltip
6962
anchorSelect="#my-anchor-element"
7063
content="Hello world!"
7164
/>
7265
```
7366

7467
<TooltipAnchor id="my-anchor-element">◕‿‿◕</TooltipAnchor>
75-
<Tooltip
76-
anchorSelect="#my-anchor-element"
77-
content="Hello world!"
78-
/>
68+
<Tooltip anchorSelect="#my-anchor-element" content="Hello world!" />

‎docs/docs/examples/delay.mdx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ sidebar_position: 1
77
Delay showing/hiding the ReactTooltip component.
88

99
import { Tooltip } from 'react-tooltip'
10-
import 'react-tooltip/dist/react-tooltip.css'
1110

1211
export const TooltipAnchor = ({ children, id, ...rest }) => {
1312
return (
@@ -38,7 +37,6 @@ export const TooltipAnchor = ({ children, id, ...rest }) => {
3837

3938
```jsx
4039
import { Tooltip } from 'react-tooltip';
41-
import 'react-tooltip/dist/react-tooltip.css';
4240

4341
<a
4442
data-tooltip-id="tooltip-anchor-hide"
@@ -63,7 +61,6 @@ import 'react-tooltip/dist/react-tooltip.css';
6361

6462
```jsx
6563
import { Tooltip } from 'react-tooltip';
66-
import 'react-tooltip/dist/react-tooltip.css';
6764

6865
<a
6966
data-tooltip-id="tooltip-anchor-show"

‎docs/docs/examples/events.mdx

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ This has been deprecated. Use the `openOnClick` tooltip prop instead.
1313
:::
1414

1515
import { Tooltip } from 'react-tooltip'
16-
import 'react-tooltip/dist/react-tooltip.css'
1716

1817
export const TooltipAnchor = ({ children, id, ...rest }) => {
1918
return (
@@ -50,22 +49,17 @@ This is the default event option, so it doesn't have to be manually set.
5049

5150
```jsx
5251
import { Tooltip } from 'react-tooltip';
53-
import 'react-tooltip/dist/react-tooltip.css';
5452

5553
<a data-tooltip-id="my-tooltip"> ◕‿‿◕ </a>
56-
<Tooltip
54+
<Tooltip
5755
id="my-tooltip"
5856
content="Hello world!"
5957
events={['hover']}
6058
/>
6159
```
6260

6361
<TooltipAnchor data-tooltip-id="my-tooltip">◕‿‿◕</TooltipAnchor>
64-
<Tooltip
65-
id="my-tooltip"
66-
content="Hello world!"
67-
events={['hover']}
68-
/>
62+
<Tooltip id="my-tooltip" content="Hello world!" events={['hover']} />
6963

7064
### Using `click`
7165

@@ -77,19 +71,14 @@ Clicking anywhere outside the anchor element will close the tooltip.
7771

7872
```jsx
7973
import { Tooltip } from 'react-tooltip';
80-
import 'react-tooltip/dist/react-tooltip.css';
8174

8275
<a data-tooltip-id="my-tooltip-click"> ◕‿‿◕ </a>
83-
<Tooltip
76+
<Tooltip
8477
id="my-tooltip-click"
8578
content="Hello world!"
8679
events={['click']}
8780
/>
8881
```
8982

9083
<TooltipAnchor data-tooltip-id="my-tooltip-click">◕‿‿◕</TooltipAnchor>
91-
<Tooltip
92-
id="my-tooltip-click"
93-
content="Hello world!"
94-
events={['click']}
95-
/>
84+
<Tooltip id="my-tooltip-click" content="Hello world!" events={['click']} />

0 commit comments

Comments
 (0)