Skip to content

Commit b3dea62

Browse files
gabrieljablonskigabrieljablonski
authored
Merge branch 'master' into fix/propswithchildren
2 parents 581d7c0 + baad6a7 commit b3dea62

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+2651
-1488
lines changed

‎README.md

+42-19
Original file line numberDiff line numberDiff line change
@@ -46,17 +46,20 @@ yarn add react-tooltip
4646

4747
## Usage
4848

49-
### Using NPM
49+
> :warning: If you were already using `react-tooltip<=5.7.5`, you'll be getting some deprecation warnings regarding the `anchorId` prop and some other features.
50+
In versions >=5.8.0, we've introduced the `data-tooltip-id` attribute, and the `anchorSelect` prop, which are our recommended methods of using the tooltip moving forward. Check [the docs](https://react-tooltip.com/docs/getting-started) for more details.
5051
51-
1 . Import the CSS file to set default styling
52+
### Using NPM package
53+
54+
1 . Import the CSS file to set default styling.
5255

5356
```js
5457
import 'react-tooltip/dist/react-tooltip.css'
5558
```
5659

5760
This needs to be done only once. We suggest you do it on your `src/index.js` or equivalent file.
5861

59-
2 . Import `react-tooltip` after installation
62+
2 . Import `react-tooltip` after installation.
6063

6164
```js
6265
import { Tooltip } from 'react-tooltip'
@@ -68,20 +71,41 @@ or if you want to still use the name ReactTooltip as V4:
6871
import { Tooltip as ReactTooltip } from 'react-tooltip'
6972
```
7073

71-
3 . Add `data-tooltip-content="your placeholder"` to your element
74+
3 . Add `data-tooltip-id="<tooltip id>"` and `data-tooltip-content="<your placeholder>"` to your element.
75+
76+
> `data-tooltip-id` is the equivalent of V4's `data-for`.
7277
7378
```jsx
74-
<p id="my-element" data-tooltip-content="hello world">
75-
Tooltip
76-
</p>
79+
<a data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!">
80+
◕‿‿◕
81+
</a>
7782
```
7883

79-
4 . Include react-tooltip component
84+
4 . Include the `<Tooltip />` element.
85+
86+
> Don't forget to set the id, it won't work without it!
8087
8188
```jsx
82-
<ReactTooltip anchorId="my-element" />
89+
<Tooltip id="my-tooltip" />
8390
```
8491

92+
#### Using multiple anchor elements
93+
94+
You can also set the `anchorSelect` tooltip prop to use the tooltip with multiple anchor elements without having to set `data-tooltip-id` on each of them.
95+
`anchorSelect` must be a valid [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors).
96+
97+
```jsx
98+
<a className="my-anchor-element" data-tooltip-content="Hello world!">
99+
◕‿‿◕
100+
</a>
101+
<a className="my-anchor-element" data-tooltip-content="Hello to you too!">
102+
◕‿‿◕
103+
</a>
104+
<Tooltip anchorSelect=".my-anchor-element" />
105+
```
106+
107+
Check [the V5 docs](https://react-tooltip.com/docs/getting-started) for more complex use cases.
108+
85109
### Standalone
86110

87111
You can import `node_modules/react-tooltip/dist/react-tooltip.[mode].js` into your page. Please make sure that you have already imported `react` and `react-dom` into your page.
@@ -98,27 +122,26 @@ PS: all the files have a minified version and a non-minified version.
98122

99123
For all available options, please check [React Tooltip Options](https://react-tooltip.com/docs/options)
100124

101-
### Security Note
125+
### Security note
102126

103127
The `html` option allows a tooltip to directly display raw HTML. This is a security risk if any of that content is supplied by the user. Any user-supplied content must be sanitized, using a package like [sanitize-html](https://www.npmjs.com/package/sanitize-html). We chose not to include sanitization after discovering it [increased our package size](https://github.com/wwayne/react-tooltip/issues/429) too much - we don't want to penalize people who don't use the `html` option.
104128

105-
#### JSX Note
129+
#### JSX note
106130

107-
You can use React's [`renderToStaticMarkup`-function](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup) to use JSX instead of HTML.
131+
You can use [`renderToStaticMarkup()` function](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup) to use JSX instead of HTML.
108132
**Example:**
109133

110134
```jsx
111135
import ReactDOMServer from 'react-dom/server';
112136
[...]
113-
<p id="my-element" data-tooltip-html={ReactDOMServer.renderToString(<div>I am <b>JSX</b> content</div>)}>
114-
Hover me
115-
</p>
137+
<a
138+
data-tooltip-id="my-tooltip"
139+
data-tooltip-html={ReactDOMServer.renderToStaticMarkup(<div>I am <b>JSX</b> content</div>)}
140+
>
141+
◕‿‿◕
142+
</a>
116143
```
117144

118-
#### Note
119-
120-
- **id** is necessary, because `<ReactTooltip anchorId="my-element" />` finds the tooltip via this attribute
121-
122145
## Article
123146

124147
[How I insert sass into react component](https://medium.com/@wwayne_me/how-i-insert-sass-into-my-npm-react-component-b46b9811c226#.gi4hxu44a)

‎bundlesize.config.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22
"files": [
33
{
44
"path": "./dist/react-tooltip.cjs.min.js",
5-
"maxSize": "14 kB"
5+
"maxSize": "13.5 kB"
66
},
77
{
88
"path": "./dist/react-tooltip.esm.min.js",
9-
"maxSize": "14 kB"
9+
"maxSize": "13.5 kB"
1010
},
1111
{
1212
"path": "./dist/react-tooltip.umd.min.js",
13-
"maxSize": "14 kB"
13+
"maxSize": "13.5 kB"
1414
}
1515
]
1616
}

‎docs/docs/examples/_category_.json

+1-1
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/anchor-select.mdx

+202
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 `#`. 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 `.`. 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 example 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+
/>

0 commit comments

Comments
 (0)