Skip to content

Commit d4ab568

Browse files
gabrieljablonskigabrieljablonski
committed
docs: add anchor select example page
1 parent 04dc2b3 commit d4ab568

File tree

4 files changed

+214
-7
lines changed

4 files changed

+214
-7
lines changed

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

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
---
2+
sidebar_position: 1
3+
---
4+
5+
# Anchor select
6+
7+
Default color stylings available for the ReactTooltip component.
8+
9+
import { Tooltip } from 'react-tooltip'
10+
import 'react-tooltip/dist/react-tooltip.css'
11+
12+
export const TooltipAnchor = ({ children, id, ...rest }) => {
13+
return (
14+
<span
15+
id={id}
16+
style={{
17+
display: 'flex',
18+
justifyContent: 'center',
19+
margin: 'auto',
20+
alignItems: 'center',
21+
width: '60px',
22+
height: '60px',
23+
borderRadius: '60px',
24+
color: '#222',
25+
background: 'rgba(255, 255, 255, 1)',
26+
cursor: 'pointer',
27+
boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)',
28+
border: '1px solid #333',
29+
}}
30+
{...rest}
31+
>
32+
{children}
33+
</span>
34+
)
35+
}
36+
37+
### Basic usage
38+
39+
The `anchorSelect` prop uses a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) to attach the tooltip to the anchor elements. The most common use for this is selecting elements with a specific id, or with a CSS class.
40+
41+
#### Using id attribute
42+
43+
:::info
44+
45+
A CSS selector for a specific id begins with a `#` sign. Don't forget to put it before the id on your selector!
46+
47+
:::
48+
49+
```jsx
50+
import { Tooltip } from 'react-tooltip';
51+
import 'react-tooltip/dist/react-tooltip.css';
52+
53+
<a id="my-anchor-element-id">◕‿‿◕</a>
54+
<Tooltip
55+
// Don't forget the `#`!
56+
anchorSelect="#my-anchor-element-id"
57+
content="Hello world!"
58+
/>
59+
```
60+
61+
<TooltipAnchor id="my-anchor-element-id">◕‿‿◕</TooltipAnchor>
62+
<Tooltip
63+
anchorSelect="#my-anchor-element-id"
64+
content="Hello world!"
65+
/>
66+
67+
#### Using class attribute
68+
69+
:::info
70+
71+
A CSS selector for a specific id begins with a `.` sign. Don't forget to put it before the class on your selector!
72+
73+
:::
74+
75+
```jsx
76+
import { Tooltip } from 'react-tooltip';
77+
import 'react-tooltip/dist/react-tooltip.css';
78+
79+
<a className="my-anchor-element-class">◕‿‿◕</a>
80+
<a className="my-anchor-element-class">◕‿‿◕</a>
81+
<a className="my-anchor-element-class">◕‿‿◕</a>
82+
<a className="my-anchor-element-class">◕‿‿◕</a>
83+
<Tooltip
84+
// Don't forget the `.`!
85+
anchorSelect=".my-anchor-element-class"
86+
content="Hello world!"
87+
/>
88+
```
89+
90+
<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>
103+
</div>
104+
<Tooltip
105+
anchorSelect=".my-anchor-element-class"
106+
content="Hello world!"
107+
/>
108+
109+
### Complex selectors
110+
111+
Once you've understood how it works, you can write CSS selectors as complex as you can imagine. Here are some interesting examples.
112+
113+
#### Attribute prefix
114+
115+
:::info
116+
117+
`[attr^='prefix']` can be read as "any element that has an attribute `attr` in which its value starts with `prefix`. Remove the `^` for an exact match.
118+
119+
This examples uses the name attribute, but it works for any HTML attribute (id, class, ...).
120+
121+
:::
122+
123+
```jsx
124+
import { Tooltip } from 'react-tooltip';
125+
import 'react-tooltip/dist/react-tooltip.css';
126+
127+
<a name="my-anchor-element-1">◕‿‿◕</a>
128+
<a name="my-anchor-element-2">◕‿‿◕</a>
129+
<a name="my-anchor-element-3">◕‿‿◕</a>
130+
<a name="my-anchor-element-4">◕‿‿◕</a>
131+
<Tooltip
132+
anchorSelect="[name^='my-anchor-element-']"
133+
content="Hello world!"
134+
/>
135+
```
136+
137+
<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>
150+
</div>
151+
<Tooltip
152+
anchorSelect="[name^='my-anchor-element-']"
153+
content="Hello world!"
154+
/>
155+
156+
#### Child selector
157+
158+
:::info
159+
160+
Make sure there isn't an easier alternative before diving into complex selectors like this.
161+
162+
Often you can just use a class selector or something else much simpler.
163+
164+
:::
165+
166+
```jsx
167+
import { Tooltip } from 'react-tooltip';
168+
import 'react-tooltip/dist/react-tooltip.css';
169+
170+
<section id="section-anchor-select" style={{ marginTop: '100px' }}>
171+
<a>◕‿‿◕</a>
172+
<a>◕‿‿◕</a>
173+
<a>◕‿‿◕</a>
174+
<a>◕‿‿◕</a>
175+
</section>
176+
<Tooltip
177+
anchorSelect="section[id='section-anchor-select'] > a:nth-child(odd)"
178+
content="I am an odd child!"
179+
/>
180+
<Tooltip
181+
anchorSelect="section[id='section-anchor-select'] > a:nth-child(even)"
182+
content="I am an even child!"
183+
/>
184+
```
185+
186+
<section
187+
id="section-anchor-select"
188+
style={{ display: 'flex', gap: '5px', width: 'fit-content', margin: 'auto' }}
189+
>
190+
<TooltipAnchor>◕‿‿◕</TooltipAnchor>
191+
<TooltipAnchor>◕‿‿◕</TooltipAnchor>
192+
<TooltipAnchor>◕‿‿◕</TooltipAnchor>
193+
<TooltipAnchor>◕‿‿◕</TooltipAnchor>
194+
</section>
195+
<Tooltip
196+
anchorSelect="section[id='section-anchor-select'] > span:nth-child(odd)"
197+
content="I am an odd child!"
198+
/>
199+
<Tooltip
200+
anchorSelect="section[id='section-anchor-select'] > span:nth-child(even)"
201+
content="I am an even child!"
202+
/>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
sidebar_position: 1
2+
sidebar_position: 0
33
---
44

55
# Basic examples
@@ -85,7 +85,7 @@ import 'react-tooltip/dist/react-tooltip.css'
8585

8686
:::info
8787

88-
Check the [`anchorSelect` examples](./anchor-select.mdx) for more complex use cases.
88+
Check the [Anchor select examples](./anchor-select.mdx) for more complex use cases.
8989

9090
:::
9191

‎docs/docs/examples/provider-wrapper.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
sidebar_position: 1
33
---
44

5-
# Provider/wrapper (DEPRECATED)
5+
# Provider/wrapper
66

77
Using multiple anchors elements with a single ReactTooltip component.
88

9-
:::caution
9+
:::danger
1010

1111
This has been deprecated. Use the `anchorSelect` tooltip prop instead. [Click here](./anchor-select.mdx) for some examples.
1212

@@ -102,7 +102,7 @@ import 'react-tooltip/dist/react-tooltip.css';
102102

103103
### Multiple tooltips
104104

105-
:::caution
105+
:::danger
106106

107107
Reminder that this has been deprecated. Use the `anchorSelect` tooltip prop instead. [Click here](./anchor-select.mdx) for some examples.
108108

‎docs/docs/examples/state.mdx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { useState } from 'react'
1010
import { Tooltip } from 'react-tooltip'
1111
import 'react-tooltip/dist/react-tooltip.css'
1212

13-
export const TooltipAnchor = ({ children, id, ...rest }) => {
13+
export const TooltipAnchor = ({ children, id, background, ...rest }) => {
1414
return (
1515
<span
1616
id={id}
@@ -22,7 +22,7 @@ export const TooltipAnchor = ({ children, id, ...rest }) => {
2222
height: '60px',
2323
borderRadius: '60px',
2424
color: '#222',
25-
background: 'rgba(255, 255, 255, 1)',
25+
background: background || 'rgba(255, 255, 255, 1)',
2626
cursor: 'pointer',
2727
boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)',
2828
border: '1px solid #333',
@@ -72,13 +72,15 @@ const [isOpen, setIsOpen] = useState(false)
7272
</a>
7373
<a
7474
data-tooltip-id="my-tooltip"
75+
data-tooltip-content="Click me!"
7576
onMouseEnter={() => setIsOpen(true)}
7677
onClick={() => setIsOpen(false)}
7778
>
7879
◕‿‿◕
7980
</a>
8081
<Tooltip
8182
id="my-tooltip"
83+
content="Hello world!"
8284
isOpen={isOpen}
8385
/>
8486
```
@@ -119,14 +121,17 @@ export const ControlledStateExample = () => {
119121
◕‿‿◕
120122
</TooltipAnchor>
121123
<TooltipAnchor
124+
background="lightgray"
122125
data-tooltip-id="my-tooltip"
126+
data-tooltip-content="Click me!"
123127
onMouseEnter={() => setIsOpen(true)}
124128
onClick={() => setIsOpen(false)}
125129
>
126130
◕‿‿◕
127131
</TooltipAnchor>
128132
<Tooltip
129133
id="my-tooltip"
134+
content="Hello world!"
130135
isOpen={isOpen}
131136
/>
132137
</>

0 commit comments

Comments
 (0)