Skip to content

Commit ce760c2

Browse files
danielbariondanielbarion
authored
Merge pull request #846 from ReactTooltip/feat/style-prop
feat: dynamically setting style through styles prop
2 parents 9661e98 + d9ef7d5 commit ce760c2

22 files changed

+194
-137
lines changed

‎CONTRIBUTION.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Contribution
2+
3+
## Running project locally
4+
5+
### ReactTooltip (root)
6+
7+
1. Run `npm install` || `yarn` to install dependencies
8+
2. You can test by: `yarn dev` to run dev mode, or you can run **docs** directly using root folder instead of NPM, for this, please check **docs section**.
9+
10+
### Docs
11+
12+
You still need step 1 from `ReactTooltip (root)` section.
13+
Docs are commited using npm packages, but with this steps, you can use local ReactTooltip package build.
14+
15+
1. In **docs** folder, run `npm install` || `yarn` to install dependencies
16+
2. In **root** folder (parent of docs folder), run `yarn build` to generate a production build (you can use `yarn build --watch` to always generate a new build when a file changes)
17+
3. Change `package.json`:
18+
19+
From this:
20+
```
21+
"react": "18.2.0",
22+
"react-dom": "18.2.0",
23+
"react-tooltip": "5.0.0"
24+
```
25+
26+
To this:
27+
```
28+
"react": "link:../node_modules/react",
29+
"react-dom": "link:../node_modules/react-dom",
30+
"react-tooltip": "link:.."
31+
32+
```
33+
34+
4. Run `yarn start` and open `localhost:3000` to see docs running locally.
35+
36+
OBS: do not commit this change or the docs will broken the deployment and will not be updated.
37+
38+

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,8 @@ import ReactDOMServer from 'react-dom/server';
104104

105105
[danielbarion](https://github.com/danielbarion) Maintainer - Creator of React Tooltip >= V5.
106106

107+
[gabrieljablonski](https://github.com/gabrieljablonski) Maintainer.
108+
107109
[aronhelser](https://github.com/aronhelser) Passive maintainer - accepting PRs and doing minor testing, but not fixing issues or doing active development.
108110

109111
[alexgurr](https://github.com/alexgurr) (inactive).

‎docs/docs/examples/_category_.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"label": "Examples",
33
"position": 4,
44
"link": {
5-
"type": "generated-index"
5+
"type": "generated-index",
6+
"description": "Examples using props and some use cases with ReactTooltip component"
67
}
78
}

‎docs/docs/examples/styling.mdx

Lines changed: 79 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,12 @@ sidebar_position: 1
66

77
How to customize tooltip styles in ReactTooltip styles.
88

9+
Now tooltip arrow inherit his background color from tooltip (his parent).
10+
911
import { Tooltip } from 'react-tooltip'
1012
import 'react-tooltip/dist/react-tooltip.css'
13+
import CodeBlock from '@theme/CodeBlock'
14+
import TooltipStyles from '!!raw-loader!../../../src/components/Tooltip/styles.module.css'
1115

1216
export const TooltipAnchor = ({ children, id, ...rest }) => {
1317
return (
@@ -33,31 +37,55 @@ export const TooltipAnchor = ({ children, id, ...rest }) => {
3337
)
3438
}
3539

36-
### Basic explanation
40+
### Basic explanation - Inline Styling
41+
42+
You can add styles into the tooltip as inline styling.
43+
44+
```jsx
45+
import { Tooltip } from 'react-tooltip'
46+
import 'react-tooltip/dist/react-tooltip.css'
47+
48+
<a id="custom-inline-styles" data-tooltip-content="hello world!">
49+
◕‿‿◕
50+
</a>
51+
<Tooltip
52+
anchorId="custom-inline-styles"
53+
style={{ backgroundColor: "rgb(0, 255, 30)", color: "#222" }}
54+
/>
55+
```
56+
57+
<div
58+
style={{ display: 'flex', columnGap: '16px', justifyContent: 'center' }}
59+
>
60+
<TooltipAnchor id="custom-inline-styles" data-tooltip-content="hello world!">
61+
◕‿‿◕
62+
</TooltipAnchor>
63+
<Tooltip anchorId="custom-inline-styles" style={{ backgroundColor: "rgb(0, 255, 30)", color: "#222" }} />
64+
</div>
65+
66+
67+
### Basic explanation - Classes
3768

3869
You don't need `!important` anymore, you just need to know at least a bit about CSS Specificity ([MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) | [W3c Docs](https://www.w3schools.com/css/css_specificity.asp)).
3970
Using CSS Specificity you can add a class with more specificity than the current used in tooltip and you can override or add new rules to the component style.
4071

72+
4173
```jsx
4274
import { Tooltip } from 'react-tooltip'
4375
import 'react-tooltip/dist/react-tooltip.css'
4476

4577
<style>
46-
.example-container .example {
78+
.example {
4779
color: #222;
4880
background-color: rgb(0, 247, 255);
4981
}
50-
51-
.example-container .example .example-arrow {
52-
background-color: rgb(0, 247, 255);
53-
}
5482
</style>
5583

5684
<div className="example-container">
5785
<a id="custom-styles" data-tooltip-content="hello world!">
5886
◕‿‿◕
5987
</a>
60-
<Tooltip anchorId="custom-styles" className="example" classNameArrow="example-arrow" />
88+
<Tooltip anchorId="custom-styles" className="example" />
6189
</div>
6290
```
6391

@@ -68,74 +96,14 @@ import 'react-tooltip/dist/react-tooltip.css'
6896
<TooltipAnchor id="custom-styles" data-tooltip-content="hello world!">
6997
◕‿‿◕
7098
</TooltipAnchor>
71-
<Tooltip anchorId="custom-styles" className="example" classNameArrow="example-arrow" />
99+
<Tooltip anchorId="custom-styles" className="example" />
72100
</div>
73101

74102
#### Explanation
75103

76104
In this example, we are adding an extra level to the CSS classes, the following styles are the default one of Tooltip component when we write this docs:
77105

78-
```css
79-
.tooltip {
80-
visibility: hidden;
81-
width: max-content;
82-
position: absolute;
83-
top: 0;
84-
left: 0;
85-
padding: 8px 16px;
86-
border-radius: 3px;
87-
font-size: 90%;
88-
pointer-events: none;
89-
opacity: 0;
90-
transition: opacity 0.3s ease-out;
91-
will-change: opacity, visibility;
92-
}
93-
94-
.arrow {
95-
position: absolute;
96-
background: var(--rt-color-dark);
97-
width: 8px;
98-
height: 8px;
99-
transform: rotate(45deg);
100-
}
101-
102-
/** Types variant **/
103-
.dark,
104-
.dark .arrow {
105-
background: var(--rt-color-dark);
106-
color: var(--rt-color-white);
107-
}
108-
109-
.light,
110-
.light .arrow {
111-
background-color: var(--rt-color-white);
112-
color: var(--rt-color-dark);
113-
}
114-
115-
.success,
116-
.success .arrow {
117-
background-color: var(--rt-color-success);
118-
color: var(--rt-color-white);
119-
}
120-
121-
.warning,
122-
.warning .arrow {
123-
background-color: var(--rt-color-warning);
124-
color: var(--rt-color-white);
125-
}
126-
127-
.error,
128-
.error .arrow {
129-
background-color: var(--rt-color-error);
130-
color: var(--rt-color-white);
131-
}
132-
133-
.info,
134-
.info .arrow {
135-
background-color: var(--rt-color-info);
136-
color: var(--rt-color-white);
137-
}
138-
```
106+
<CodeBlock language="css">{TooltipStyles}</CodeBlock>
139107

140108
So, if we only add new classes like the below, this will not work because this is the same level of specificity than the default dark variant as example, you can compare:
141109

@@ -145,20 +113,9 @@ So, if we only add new classes like the below, this will not work because this i
145113
background-color: rgb(0, 247, 255);
146114
}
147115

116+
/** add next line only if you want to have tooltip arrow with a different background color from tooltip **/
148117
.example .example-arrow {
149-
background-color: rgb(0, 247, 255);
150-
}
151-
```
152-
153-
```css
154-
.tooltip {
155-
...;
156-
}
157-
158-
.dark,
159-
.dark .arrow {
160-
background: var(--rt-color-dark);
161-
color: var(--rt-color-white);
118+
background-color: rgb(255, 0, 0);
162119
}
163120
```
164121

@@ -170,8 +127,9 @@ So, to make this work as expected, we need to add a new more level like this one
170127
background-color: rgb(0, 247, 255);
171128
}
172129

130+
/** add next line only if you want to have tooltip arrow with a different background color from tooltip **/
173131
.some-class-or-rule .example .example-arrow {
174-
background-color: rgb(0, 247, 255);
132+
background-color: rgb(255, 0, 0);
175133
}
176134
```
177135

@@ -192,17 +150,13 @@ import 'react-tooltip/dist/react-tooltip.css'
192150
color: #222;
193151
background-color: rgb(255, 153, 0);
194152
}
195-
196-
.example-container .example-orange .example-arrow {
197-
background-color: rgb(255, 153, 0);
198-
}
199153
</style>
200154

201155
<div className="example-container">
202156
<a id="custom-styles-orange" data-tooltip-content="hello world!">
203157
◕‿‿◕
204158
</a>
205-
<Tooltip anchorId="custom-styles-orange" className="example-orange" classNameArrow="example-arrow" />
159+
<Tooltip anchorId="custom-styles-orange" className="example-orange" />
206160
</div>
207161
```
208162

@@ -216,7 +170,6 @@ import 'react-tooltip/dist/react-tooltip.css'
216170
<Tooltip
217171
anchorId="custom-styles-orange"
218172
className="example-orange"
219-
classNameArrow="example-arrow"
220173
/>
221174
</div>
222175

@@ -231,17 +184,13 @@ import 'react-tooltip/dist/react-tooltip.css'
231184
color: #fff;
232185
background-color: rgb(255, 0, 255);
233186
}
234-
235-
.example-container .example-pink .example-arrow {
236-
background-color: rgb(255, 0, 255);
237-
}
238187
</style>
239188

240189
<div className="example-container">
241190
<a id="custom-styles-pink" data-tooltip-content="hello world!">
242191
◕‿‿◕
243192
</a>
244-
<Tooltip anchorId="custom-styles-pink" className="example-pink" classNameArrow="example-arrow" />
193+
<Tooltip anchorId="custom-styles-pink" className="example-pink" />
245194
</div>
246195
```
247196

@@ -252,7 +201,42 @@ import 'react-tooltip/dist/react-tooltip.css'
252201
<TooltipAnchor id="custom-styles-pink" data-tooltip-content="hello world!">
253202
◕‿‿◕
254203
</TooltipAnchor>
255-
<Tooltip anchorId="custom-styles-pink" className="example-pink" classNameArrow="example-arrow" />
204+
<Tooltip anchorId="custom-styles-pink" className="example-pink" />
205+
</div>
206+
207+
#### Tooltip Arrow with a different color from Tooltip
208+
209+
```jsx
210+
import { Tooltip } from 'react-tooltip'
211+
import 'react-tooltip/dist/react-tooltip.css'
212+
213+
<style>
214+
.example-container .example-diff-arrow {
215+
color: #fff;
216+
background-color: rgb(55, 55, 55);
217+
}
218+
219+
.example-container .example-diff-arrow .example-arrow {
220+
background-color: rgb(222, 34, 72);
221+
}
222+
</style>
223+
224+
<div className="example-container">
225+
<a id="custom-styles-diff" data-tooltip-content="hello world!">
226+
◕‿‿◕
227+
</a>
228+
<Tooltip anchorId="custom-styles-diff" className="example-diff-arrow" classNameArrow="example-arrow" />
229+
</div>
230+
```
231+
232+
<div
233+
className="example-container"
234+
style={{ display: 'flex', columnGap: '16px', justifyContent: 'center' }}
235+
>
236+
<TooltipAnchor id="custom-styles-diff" data-tooltip-content="hello world!">
237+
◕‿‿◕
238+
</TooltipAnchor>
239+
<Tooltip anchorId="custom-styles-diff" className="example-diff-arrow" classNameArrow="example-arrow" />
256240
</div>
257241

258242
### More examples - Radius

‎docs/docs/getting-started.mdx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,11 +85,15 @@ import ReactTooltip from 'react-tooltip'
8585
2 . Add data-content = "your placeholder" to your element
8686

8787
```jsx
88-
<p id="my-anchor-element" data-content="hello world" data-place="top">
88+
<p id="my-anchor-element" data-tooltip-content="hello world" data-tooltip-place="top">
8989
Tooltip
9090
</p>
9191
```
9292

93+
### Styling
94+
95+
If you want a styled tooltip, don't forget to add the style file `import 'react-tooltip/dist/react-tooltip.css`
96+
9397
3 . Include react-tooltip component
9498

9599
```jsx

‎docs/docs/options.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ import 'react-tooltip/dist/react-tooltip.css'
6666
| positionStrategy | string | false | `absolute` | `absolute` `fixed` | the position strategy used for the tooltip. set to `fixed` if you run into issues with `overflow: hidden` on the tooltip parent container |
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 |
69+
| style | CSSProperties | false | | any React inline style | add styles directly to the component by `style` attribute |
6970
| getContent | function | false | | (value: string) => string | a method available to parse, format or modify the given content of tooltip before show it |
7071
| 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`) |
7172
| setIsOpen | function | false | | | the tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip |

‎docs/docs/upgrade-guide/_category_.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"label": "Upgrade Guide",
33
"position": 2,
44
"link": {
5-
"type": "generated-index"
5+
"type": "generated-index",
6+
"description": "Upgrade docs related to migration from V4 to V5"
67
}
78
}

‎docs/docs/upgrade-guide/basic-examples-v4-v5.mdx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ sidebar_position: 4
44

55
# Basic examples V4 -> V5
66

7+
Examples of use in V4 -> V5
8+
79
import { Tooltip } from 'react-tooltip'
810
import 'react-tooltip/dist/react-tooltip.css'
911

@@ -78,7 +80,7 @@ import 'react-tooltip/dist/react-tooltip.css';
7880

7981
---
8082

81-
# Colors
83+
## Colors
8284

8385
### V4 or less - type
8486

0 commit comments

Comments
 (0)