Skip to content

Commit 04dc2b3

Browse files
gabrieljablonskigabrieljablonski
committed
docs: major docs overhaul for anchorSelect 
1 parent 7472211 commit 04dc2b3

19 files changed

+765
-633
lines changed

‎docs/docs/examples/_category_.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33
"position": 4,
44
"link": {
55
"type": "generated-index",
6-
"description": "Examples using props and some use cases with ReactTooltip component"
6+
"description": "Examples for the tooltip props and some interesting use cases."
77
}
88
}

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

Lines changed: 62 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ sidebar_position: 1
44

55
# Basic examples
66

7-
Basic examples of use ReactTooltip component.
7+
Some basic examples of how to use the ReactTooltip component.
88

99
import { Tooltip } from 'react-tooltip'
1010
import 'react-tooltip/dist/react-tooltip.css'
@@ -15,6 +15,7 @@ export const TooltipAnchor = ({ children, id, ...rest }) => {
1515
id={id}
1616
style={{
1717
display: 'flex',
18+
margin: 'auto',
1819
justifyContent: 'center',
1920
alignItems: 'center',
2021
width: '60px',
@@ -33,36 +34,78 @@ export const TooltipAnchor = ({ children, id, ...rest }) => {
3334
)
3435
}
3536

36-
### Props
37+
### Data attributes
3738

3839
```jsx
3940
import { Tooltip } from 'react-tooltip';
40-
import 'react-tooltip/dist/react-tooltip.css'
41-
42-
<a id="props-basic"> ◕‿‿◕ </a>
41+
import 'react-tooltip/dist/react-tooltip.css';
4342

44-
<Tooltip anchorId="props-basic" content="hello world!" />
43+
<a data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!">
44+
◕‿‿◕
45+
</a>
46+
<a data-tooltip-id="my-tooltip" data-tooltip-content="Hello to you too!">
47+
◕‿‿◕
48+
</a>
49+
<Tooltip id="my-tooltip" />
4550
```
4651

47-
<TooltipAnchor id="props-basic">◕‿‿◕</TooltipAnchor>
48-
<Tooltip anchorId="props-basic" content="hello world!" />
52+
<div style={{ display: 'flex', flexDirection: 'row', width: 'fit-content', margin: 'auto', gap: '5px' }}>
53+
<TooltipAnchor data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!">
54+
◕‿‿◕
55+
</TooltipAnchor>
56+
<TooltipAnchor data-tooltip-id="my-tooltip" data-tooltip-content="Hello to you too!">
57+
◕‿‿◕
58+
</TooltipAnchor>
59+
</div>
60+
<Tooltip id="my-tooltip" />
61+
62+
### Props
4963

50-
### Data attributes
64+
65+
#### Using anchor element `id`
5166

5267
```jsx
5368
import { Tooltip } from 'react-tooltip';
54-
import 'react-tooltip/dist/react-tooltip.css';
55-
56-
<a id="attributes-basic" data-tooltip-content="hello world!"> ◕‿‿◕ </a>
69+
import 'react-tooltip/dist/react-tooltip.css'
5770

58-
<Tooltip anchorId="attributes-basic" />
71+
<a id="my-anchor-element">◕‿‿◕</a>
72+
<Tooltip
73+
anchorSelect="#my-anchor-element"
74+
content="Hello world!"
75+
/>
5976
```
6077

61-
<TooltipAnchor id="attributes-basic" data-tooltip-content="hello world!">
62-
◕‿‿◕
63-
</TooltipAnchor>
64-
<Tooltip anchorId="attributes-basic" />
78+
<TooltipAnchor id="my-anchor-element">◕‿‿◕</TooltipAnchor>
79+
<Tooltip
80+
anchorSelect="#my-anchor-element"
81+
content="Hello world!"
82+
/>
6583

66-
---
84+
#### Using anchor elements `className`
85+
86+
:::info
87+
88+
Check the [`anchorSelect` examples](./anchor-select.mdx) for more complex use cases.
89+
90+
:::
91+
92+
```jsx
93+
import { Tooltip } from 'react-tooltip';
94+
import 'react-tooltip/dist/react-tooltip.css'
95+
96+
<a className="my-anchor-element">◕‿‿◕</a>
97+
<a className="my-anchor-element">◕‿‿◕</a>
98+
<Tooltip
99+
anchorSelect=".my-anchor-element"
100+
content="Hello world!"
101+
/>
102+
```
67103

68-
To check all available options, please check `options` docs
104+
<div style={{ display: 'flex', flexDirection: 'row', width: 'fit-content', margin: 'auto', gap: '5px' }}>
105+
<TooltipAnchor className="my-anchor-element">◕‿‿◕</TooltipAnchor>
106+
<TooltipAnchor className="my-anchor-element">◕‿‿◕</TooltipAnchor>
107+
</div>
108+
<Tooltip
109+
anchorSelect=".my-anchor-element"
110+
content="Hello world!"
111+
/>

‎docs/docs/examples/children.mdx

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ sidebar_position: 1
44

55
# Children
66

7-
Children for content example of ReactTooltip component use case.
7+
Using children for setting the ReactTooltip content.
88

99
import { Tooltip } from 'react-tooltip'
1010
import 'react-tooltip/dist/react-tooltip.css'
@@ -35,32 +35,38 @@ export const TooltipAnchor = ({ children, id, ...rest }) => {
3535

3636
### Using `children` as content
3737

38-
When using `children` as content, `content` and `html` params will be ignored and only children will be shown.
38+
When using `children` as content, `html` and `content` props (and their respective data attributes) will take priority.
39+
40+
This is useful for setting a placeholder for the tooltip content.
3941

4042
```jsx
4143
import { Tooltip } from 'react-tooltip';
4244
import 'react-tooltip/dist/react-tooltip.css';
4345

44-
<a id="tooltip-anchor-children"> ◕‿‿◕ </a>
45-
<Tooltip anchorId="tooltip-anchor-children">
46+
<a data-tooltip-id="my-tooltip">◕‿‿◕</a>
47+
<Tooltip id="my-tooltip">
4648
<div>
47-
<h1>Tooltip</h1>
49+
<h3>This is a very interesting header</h3>
50+
<p>Here's some interesting stuff:</p>
4851
<ul>
49-
<li>Lorem</li>
50-
<li>Ipsum</li>
52+
<li>Some</li>
53+
<li>Interesting</li>
54+
<li>Stuff</li>
5155
</ul>
5256
</div>
5357
</Tooltip>
5458
```
5559
56-
<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
57-
<TooltipAnchor id="tooltip-anchor-children">◕‿‿◕</TooltipAnchor>
58-
<Tooltip anchorId="tooltip-anchor-children">
60+
<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '18px' }}>
61+
<TooltipAnchor data-tooltip-id="my-tooltip">◕‿‿◕</TooltipAnchor>
62+
<Tooltip id="my-tooltip">
5963
<div>
60-
<h1>Tooltip</h1>
64+
<h3>This is a very interesting header</h3>
65+
<p>Here's some interesting stuff:</p>
6166
<ul>
62-
<li>Lorem</li>
63-
<li>Ipsum</li>
67+
<li>Some</li>
68+
<li>Interesting</li>
69+
<li>Stuff</li>
6470
</ul>
6571
</div>
6672
</Tooltip>

‎docs/docs/examples/content.mdx

Lines changed: 29 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ sidebar_position: 1
44

55
# Content
66

7-
Content in ReactTooltip component.
7+
Setting the ReactTooltip content.
88

99
import { Tooltip } from 'react-tooltip'
1010
import 'react-tooltip/dist/react-tooltip.css'
@@ -16,6 +16,7 @@ export const TooltipAnchor = ({ children, id, ...rest }) => {
1616
style={{
1717
display: 'flex',
1818
justifyContent: 'center',
19+
margin: 'auto',
1920
alignItems: 'center',
2021
width: '60px',
2122
height: '60px',
@@ -33,43 +34,45 @@ export const TooltipAnchor = ({ children, id, ...rest }) => {
3334
)
3435
}
3536

36-
### Using `content`
37+
38+
### Using `data-tooltip-content` anchor element attribute
3739

3840
```jsx
3941
import { Tooltip } from 'react-tooltip';
4042
import 'react-tooltip/dist/react-tooltip.css';
4143

42-
<a id="tooltip-anchor"> ◕‿‿◕ </a>
43-
<Tooltip anchorId="tooltip-anchor" content="hello world!" place="left" />
44+
<a
45+
data-tooltip-id="my-tooltip"
46+
data-tooltip-content="Hello world!"
47+
>
48+
◕‿‿◕
49+
</a>
50+
<Tooltip id="my-tooltip" />
4451
```
4552

46-
<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
47-
<TooltipAnchor id="tooltip-anchor">◕‿‿◕</TooltipAnchor>
48-
<Tooltip
49-
anchorId="tooltip-anchor"
50-
content="hello world!"
51-
/>
52-
</div>
53+
<TooltipAnchor
54+
data-tooltip-id="my-tooltip"
55+
data-tooltip-content="Hello world!"
56+
>
57+
◕‿‿◕
58+
</TooltipAnchor>
59+
<Tooltip id="my-tooltip" />
5360

54-
### Using `data-tooltip-content`
61+
### Using `content` tooltip prop
5562

5663
```jsx
5764
import { Tooltip } from 'react-tooltip';
5865
import 'react-tooltip/dist/react-tooltip.css';
5966

60-
<a
61-
id="tooltip-anchor-data-tooltip-content"
62-
data-tooltip-content="hello world!"
63-
> ◕‿‿◕ </a>
64-
<Tooltip anchorId="tooltip-anchor-data-tooltip-content" />
67+
<a id="my-anchor-element">◕‿‿◕</a>
68+
<Tooltip
69+
anchorSelect="#my-anchor-element"
70+
content="Hello world!"
71+
/>
6572
```
6673

67-
<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
68-
<TooltipAnchor
69-
id="tooltip-anchor-data-tooltip-content"
70-
data-tooltip-content="hello world!"
71-
>
72-
◕‿‿◕
73-
</TooltipAnchor>
74-
<Tooltip anchorId="tooltip-anchor-data-tooltip-content" />
75-
</div>
74+
<TooltipAnchor id="my-anchor-element">◕‿‿◕</TooltipAnchor>
75+
<Tooltip
76+
anchorSelect="#my-anchor-element"
77+
content="Hello world!"
78+
/>

‎docs/docs/examples/delay.mdx

Lines changed: 30 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ sidebar_position: 1
44

55
# Delays
66

7-
Delays available in ReactTooltip component.
7+
Delay showing/hiding the ReactTooltip component.
88

99
import { Tooltip } from 'react-tooltip'
1010
import 'react-tooltip/dist/react-tooltip.css'
@@ -16,6 +16,7 @@ export const TooltipAnchor = ({ children, id, ...rest }) => {
1616
style={{
1717
display: 'flex',
1818
justifyContent: 'center',
19+
margin: 'auto',
1920
alignItems: 'center',
2021
width: '60px',
2122
height: '60px',
@@ -33,52 +34,52 @@ export const TooltipAnchor = ({ children, id, ...rest }) => {
3334
)
3435
}
3536

36-
### Delay to Hide tooltip
37+
### Delay to hide tooltip
3738

3839
```jsx
3940
import { Tooltip } from 'react-tooltip';
4041
import 'react-tooltip/dist/react-tooltip.css';
4142

4243
<a
43-
id="tooltip-anchor-hide"
44+
data-tooltip-id="tooltip-anchor-hide"
4445
data-tooltip-content="It will take me 1000ms to close"
4546
data-tooltip-delay-hide={1000}
46-
> ◕‿‿◕ </a>
47-
<Tooltip anchorId="tooltip-anchor-hide" />
47+
>
48+
◕‿‿◕
49+
</a>
50+
<Tooltip id="tooltip-anchor-hide" />
4851
```
4952

50-
<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
51-
<TooltipAnchor
52-
id="tooltip-anchor-hide"
53-
data-tooltip-content="It will take me 1000ms to close"
54-
data-tooltip-delay-hide={1000}
55-
>
56-
◕‿‿◕
57-
</TooltipAnchor>
58-
<Tooltip anchorId="tooltip-anchor-hide" />
59-
</div>
53+
<TooltipAnchor
54+
data-tooltip-id="tooltip-anchor-hide"
55+
data-tooltip-content="It will take me 1000ms to close"
56+
data-tooltip-delay-hide={1000}
57+
>
58+
◕‿‿◕
59+
</TooltipAnchor>
60+
<Tooltip id="tooltip-anchor-hide" />
6061

61-
### Delay to Show tooltip
62+
### Delay to show tooltip
6263

6364
```jsx
6465
import { Tooltip } from 'react-tooltip';
6566
import 'react-tooltip/dist/react-tooltip.css';
6667

6768
<a
68-
id="tooltip-anchor-show"
69+
data-tooltip-id="tooltip-anchor-show"
6970
data-tooltip-content="It took me 1000ms to open"
7071
data-tooltip-delay-show={1000}
71-
> ◕‿‿◕ </a>
72-
<Tooltip anchorId="tooltip-anchor-show" />
72+
>
73+
◕‿‿◕
74+
</a>
75+
<Tooltip id="tooltip-anchor-show" />
7376
```
7477

75-
<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
76-
<TooltipAnchor
77-
id="tooltip-anchor-show"
78-
data-tooltip-content="It took me 1000ms to open"
79-
data-tooltip-delay-show={1000}
80-
>
81-
◕‿‿◕
82-
</TooltipAnchor>
83-
<Tooltip anchorId="tooltip-anchor-show" />
84-
</div>
78+
<TooltipAnchor
79+
data-tooltip-id="tooltip-anchor-show"
80+
data-tooltip-content="It took me 1000ms to open"
81+
data-tooltip-delay-show={1000}
82+
>
83+
◕‿‿◕
84+
</TooltipAnchor>
85+
<Tooltip id="tooltip-anchor-show" />

0 commit comments

Comments
 (0)