Skip to content

Commit 29532e0

Browse files
gabrieljablonskigabrieljablonski
committed
docs: add multiple anchors example
1 parent b6ab688 commit 29532e0

File tree

1 file changed

+146
-0
lines changed

1 file changed

+146
-0
lines changed

‎docs/docs/examples/multiple-anchors.mdx

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
---
2+
sidebar_position: 1
3+
---
4+
5+
# Multiple anchors
6+
7+
Using multiple anchors elements with a single tooltip component.
8+
9+
import { Tooltip, TooltipProvider, TooltipWrapper } 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+
alignItems: 'center',
20+
width: '60px',
21+
height: '60px',
22+
borderRadius: '60px',
23+
color: '#222',
24+
background: 'rgba(255, 255, 255, 1)',
25+
cursor: 'pointer',
26+
boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)',
27+
border: '1px solid #333',
28+
}}
29+
{...rest}
30+
>
31+
{children}
32+
</span>
33+
)
34+
}
35+
36+
export const WithProvider = ({ children }) => {
37+
return (
38+
<TooltipProvider>
39+
{children}
40+
</TooltipProvider>
41+
)
42+
}
43+
44+
### Setting up `<TooltipProvider />`
45+
46+
To work with multiple anchors on a single tooltip, your component must be inside the `<TooltipProvider />`.
47+
For simplicity, just wrap your whole application with the provider.
48+
49+
```jsx
50+
// this is usually the `src/App.jsx` (or `src/App.tsx`) file
51+
import { TooltipProvider } from 'react-tooltip';
52+
import 'react-tooltip/dist/react-tooltip.css';
53+
54+
function App() {
55+
return (
56+
<TooltipProvider>
57+
<MyComponent />
58+
</TooltipProvider>
59+
)
60+
}
61+
62+
export default App;
63+
```
64+
65+
### Using `<TooltipWrapper />`
66+
67+
```jsx
68+
import { Tooltip, TooltipWrapper } from 'react-tooltip';
69+
import 'react-tooltip/dist/react-tooltip.css';
70+
71+
<TooltipWrapper content="I am using a global tooltip!">
72+
<a> ◕‿‿◕ </a>
73+
</TooltipWrapper>
74+
<TooltipWrapper content="This is the same tooltip!">
75+
<a> ◕‿‿◕ </a>
76+
</TooltipWrapper>
77+
// the tooltip component can be placed anywhere inside the provider
78+
<Tooltip />
79+
```
80+
81+
<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
82+
<WithProvider>
83+
<TooltipWrapper content="I am using a global tooltip!">
84+
<TooltipAnchor>
85+
◕‿‿◕
86+
</TooltipAnchor>
87+
</TooltipWrapper>
88+
<TooltipWrapper content="This is the same tooltip!">
89+
<TooltipAnchor>
90+
◕‿‿◕
91+
</TooltipAnchor>
92+
</TooltipWrapper>
93+
<Tooltip />
94+
</WithProvider>
95+
</div>
96+
97+
### Multiple tooltips
98+
99+
If you need to use multiple tooltips, each with multiple anchors, use the tooltip `id` prop, and the wrapper `tooltipId` prop.
100+
101+
```jsx
102+
import { Tooltip, TooltipWrapper } from 'react-tooltip';
103+
import 'react-tooltip/dist/react-tooltip.css';
104+
105+
<TooltipWrapper tooltipId="tooltip-1">
106+
<a> ◕‿‿◕ </a>
107+
</TooltipWrapper>
108+
<TooltipWrapper tooltipId="tooltip-1">
109+
<a> ◕‿‿◕ </a>
110+
</TooltipWrapper>
111+
<TooltipWrapper tooltipId="tooltip-2">
112+
<a> ◕‿‿◕ </a>
113+
</TooltipWrapper>
114+
<TooltipWrapper tooltipId="tooltip-2">
115+
<a> ◕‿‿◕ </a>
116+
</TooltipWrapper>
117+
<Tooltip id="tooltip-1" content="I am using tooltip-1" />
118+
<Tooltip id="tooltip-2" content="I am using tooltip-2" />
119+
```
120+
121+
<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center', paddingTop: '36px' }}>
122+
<WithProvider>
123+
<TooltipWrapper tooltipId="tooltip-1">
124+
<TooltipAnchor>
125+
◕‿‿◕
126+
</TooltipAnchor>
127+
</TooltipWrapper>
128+
<TooltipWrapper tooltipId="tooltip-1">
129+
<TooltipAnchor>
130+
◕‿‿◕
131+
</TooltipAnchor>
132+
</TooltipWrapper>
133+
<TooltipWrapper tooltipId="tooltip-2">
134+
<TooltipAnchor>
135+
◕‿‿◕
136+
</TooltipAnchor>
137+
</TooltipWrapper>
138+
<TooltipWrapper tooltipId="tooltip-2">
139+
<TooltipAnchor>
140+
◕‿‿◕
141+
</TooltipAnchor>
142+
</TooltipWrapper>
143+
<Tooltip id="tooltip-1" content="I am using tooltip-1" />
144+
<Tooltip id="tooltip-2" content="I am using tooltip-2" />
145+
</WithProvider>
146+
</div>

0 commit comments

Comments
 (0)