Skip to content

Commit 5d912bb

Browse files
danielbariondanielbarion
authored
Merge pull request #845 from ReactTooltip/tooltip-provider
Tooltip provider for easily sharing tooltip amongst multiple elements
2 parents 3e497ee + 29532e0 commit 5d912bb

22 files changed

+603
-261
lines changed

‎README.md

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,15 @@
99
[download-image]: https://img.shields.io/npm/dm/react-tooltip.svg?style=flat-square
1010
[download-url]: https://npmjs.org/package/react-tooltip
1111

12-
## Demo
13-
14-
<div style="display: flex; justify-content: space-between; width: 100%;>
15-
16-
[![Edit ReactTooltip](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/still-monad-yfi4fn?fontsize=14&hidenavigation=1&theme=dark)
1712
<p>
1813
<a href="https://www.digitalocean.com/?refcode=0813b3be1161&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge">
1914
<img src="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/PoweredByDO/DO_Powered_by_Badge_blue.svg" width="201px">
2015
</a>
2116
</p>
22-
</div>
2317

18+
## Demo
19+
20+
[![Edit ReactTooltip](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/still-monad-yfi4fn?fontsize=14&hidenavigation=1&theme=dark)
2421

2522
Documentation for V4 - [Github Page](https://reacttooltip.github.io/react-tooltip/).
2623

‎docs/docs/examples/get-content.mdx

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎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>

‎docs/docs/examples/state.mdx

Lines changed: 12 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const ControlledExample = () => {
4141
<>
4242
<TooltipAnchor
4343
id="tooltip-anchor"
44-
data-tooltip-content="1"
44+
data-tooltip-content="Same Tooltip, different anchor element. This little buddy is 1"
4545
onMouseEnter={() => {
4646
setAnchorId('tooltip-anchor')
4747
if (!isOpen) {
@@ -53,7 +53,7 @@ export const ControlledExample = () => {
5353
</TooltipAnchor>
5454
<TooltipAnchor
5555
id="tooltip-anchor-2"
56-
data-tooltip-content="2"
56+
data-tooltip-content="Same Tooltip, different anchor element. This little buddy is 2"
5757
onMouseEnter={() => {
5858
setAnchorId('tooltip-anchor-2')
5959
if (!isOpen) {
@@ -65,7 +65,7 @@ export const ControlledExample = () => {
6565
</TooltipAnchor>
6666
<TooltipAnchor
6767
id="tooltip-anchor-3"
68-
data-tooltip-content="3"
68+
data-tooltip-content="Same Tooltip, different anchor element. This little buddy is 3"
6969
onMouseEnter={() => {
7070
setAnchorId('tooltip-anchor-3')
7171
if (!isOpen) {
@@ -77,7 +77,7 @@ export const ControlledExample = () => {
7777
</TooltipAnchor>
7878
<TooltipAnchor
7979
id="tooltip-anchor-4"
80-
data-tooltip-content="4"
80+
data-tooltip-content="Same Tooltip, different anchor element. This little buddy is 4"
8181
onMouseEnter={() => {
8282
setAnchorId('tooltip-anchor-4')
8383
if (!isOpen) {
@@ -89,7 +89,7 @@ export const ControlledExample = () => {
8989
</TooltipAnchor>
9090
<TooltipAnchor
9191
id="tooltip-anchor-5"
92-
data-tooltip-content="5"
92+
data-tooltip-content="Same Tooltip, different anchor element. This little buddy is 5"
9393
onMouseEnter={() => {
9494
setAnchorId('tooltip-anchor-5')
9595
if (!isOpen) {
@@ -101,7 +101,7 @@ export const ControlledExample = () => {
101101
</TooltipAnchor>
102102
<TooltipAnchor
103103
id="tooltip-anchor-6"
104-
data-tooltip-content="6"
104+
data-tooltip-content="Same Tooltip, different anchor element. This little buddy is 6"
105105
onMouseEnter={() => {
106106
setAnchorId('tooltip-anchor-6')
107107
if (!isOpen) {
@@ -113,9 +113,6 @@ export const ControlledExample = () => {
113113
</TooltipAnchor>
114114
<Tooltip
115115
anchorId={anchorId}
116-
getContent={(dataTip) =>
117-
`Same Tooltip, different anchor element. This little buddy is ${dataTip}`
118-
}
119116
isOpen={isOpen}
120117
/>
121118
</>
@@ -191,7 +188,6 @@ const [anchorId, setAnchorId] = useState('tooltip-anchor')
191188
> ◕‿‿◕ </a>
192189
<Tooltip
193190
anchorId={anchorId}
194-
getContent={(dataTip) => `Same Tooltip, different anchor element. This little buddy is ${dataTip}`}
195191
isOpen={isOpen}
196192
/>
197193
```
@@ -206,7 +202,7 @@ export const UncontrolledExample = () => {
206202
<>
207203
<TooltipAnchor
208204
id="tooltip-anchor-uncontrolled"
209-
data-tooltip-content="1"
205+
data-tooltip-content="Same Tooltip, different anchor element. This little buddy is 1"
210206
onMouseEnter={() => {
211207
setAnchorId('tooltip-anchor-uncontrolled')
212208
}}
@@ -215,7 +211,7 @@ export const UncontrolledExample = () => {
215211
</TooltipAnchor>
216212
<TooltipAnchor
217213
id="tooltip-anchor-uncontrolled-2"
218-
data-tooltip-content="2"
214+
data-tooltip-content="Same Tooltip, different anchor element. This little buddy is 2"
219215
onMouseEnter={() => {
220216
setAnchorId('tooltip-anchor-uncontrolled-2')
221217
}}
@@ -224,7 +220,7 @@ export const UncontrolledExample = () => {
224220
</TooltipAnchor>
225221
<TooltipAnchor
226222
id="tooltip-anchor-uncontrolled-3"
227-
data-tooltip-content="3"
223+
data-tooltip-content="Same Tooltip, different anchor element. This little buddy is 3"
228224
onMouseEnter={() => {
229225
setAnchorId('tooltip-anchor-uncontrolled-3')
230226
}}
@@ -233,7 +229,7 @@ export const UncontrolledExample = () => {
233229
</TooltipAnchor>
234230
<TooltipAnchor
235231
id="tooltip-anchor-uncontrolled-4"
236-
data-tooltip-content="4"
232+
data-tooltip-content="Same Tooltip, different anchor element. This little buddy is 4"
237233
onMouseEnter={() => {
238234
setAnchorId('tooltip-anchor-uncontrolled-4')
239235
}}
@@ -242,7 +238,7 @@ export const UncontrolledExample = () => {
242238
</TooltipAnchor>
243239
<TooltipAnchor
244240
id="tooltip-anchor-uncontrolled-5"
245-
data-tooltip-content="5"
241+
data-tooltip-content="Same Tooltip, different anchor element. This little buddy is 5"
246242
onMouseEnter={() => {
247243
setAnchorId('tooltip-anchor-uncontrolled-5')
248244
}}
@@ -251,7 +247,7 @@ export const UncontrolledExample = () => {
251247
</TooltipAnchor>
252248
<TooltipAnchor
253249
id="tooltip-anchor-uncontrolled-6"
254-
data-tooltip-content="6"
250+
data-tooltip-content="Same Tooltip, different anchor element. This little buddy is 6"
255251
onMouseEnter={() => {
256252
setAnchorId('tooltip-anchor-uncontrolled-6')
257253
}}
@@ -260,9 +256,6 @@ export const UncontrolledExample = () => {
260256
</TooltipAnchor>
261257
<Tooltip
262258
anchorId={anchorId}
263-
getContent={(dataTip) =>
264-
`Same Tooltip, different anchor element. This little buddy is ${dataTip}`
265-
}
266259
/>
267260
</>
268261
)
@@ -318,7 +311,6 @@ const [anchorId, setAnchorId] = useState('tooltip-anchor')
318311
> ◕‿‿◕ </a>
319312
<Tooltip
320313
anchorId={anchorId}
321-
getContent={(dataTip) => `Same Tooltip, different anchor element. This little buddy is ${dataTip}`}
322314
/>
323315
```
324316

‎docs/docs/options.mdx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,6 @@ import 'react-tooltip/dist/react-tooltip.css'
6767
| delayShow | number | false | | any `number` | tooltip show will be delayed in miliseconds by the amount of value |
6868
| delayHide | number | false | | any `number` | tooltip hide will be delayed in miliseconds by the amount of value |
6969
| style | CSSProperties | false | | any React inline style | add styles directly to the component by `style` attribute |
70-
| getContent | function | false | | (value: string) => string | a method available to parse, format or modify the given content of tooltip before show it |
7170
| isOpen | boolen | false | handled by internal state | `true` `false` | the tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip (can be used **without** `setIsOpen`) |
7271
| setIsOpen | function | false | | | the tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip |
7372

‎docs/docs/upgrade-guide/changelog-v4-v5.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ V4 was a great react tooltip component but was built a few years ago, he was bui
2727
- - If you already have a `Tooltip` component in your application and want to explicitly declare this is `ReactTooltip`, just `import { Tooltip as ReactTooltip } from "react-tooltip"`
2828
- CSS import is now optional, so, you can modify and/or add any styling to your floating tooltip element
2929
- `data-tip` attribute now is `data-content`
30-
- `getContent` prop now doesn't accept `any` anymore, just a `function`
30+
- `getContent` prop was removed. Instead, you can directly pass dynamic content to the `content` tooltip prop, or to `data-tooltip-content`
3131
- default behavior of tooltip now is `solid` instead of `float`
3232

3333
## New Props
@@ -65,7 +65,7 @@ V4 was a great react tooltip component but was built a few years ago, he was bui
6565
- [ ] eventOff - **Deprecated**
6666
- [ ] isCapture - **Deprecated**
6767
- [ ] globalEventOff - **Deprecated**
68-
- [x] getContent - Now this attribute only accepts a function instead of any
68+
- [ ] getContent - use dynamic `content` instead
6969
- [ ] afterShow - not implemented yet, if many users need this feature, we will work on this one.
7070
- [ ] afterHide - not implemented yet, if many users need this feature, we will work on this one.
7171
- [ ] overridePosition - **Deprecated**

0 commit comments

Comments
 (0)