Skip to content

Commit 7c48352

Browse files
danielbariondanielbarion
committed
docs: update docs for styles attribute
1 parent 8909abf commit 7c48352

File tree

4 files changed

+112
-125
lines changed

4 files changed

+112
-125
lines changed

‎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+
styles={{ 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" styles={{ 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/src/css/custom.css

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -35,26 +35,23 @@
3535
background-color: rgb(0, 247, 255);
3636
}
3737

38-
.example-container .example .example-arrow {
39-
background-color: rgb(0, 247, 255);
40-
}
41-
4238
.example-container .example-orange {
4339
color: #222;
4440
background-color: rgb(255, 153, 0);
4541
}
4642

47-
.example-container .example-orange .example-arrow {
48-
background-color: rgb(255, 153, 0);
49-
}
50-
5143
.example-container .example-pink {
5244
color: #fff;
5345
background-color: rgb(255, 0, 255);
5446
}
5547

56-
.example-container .example-pink .example-arrow {
57-
background-color: rgb(255, 0, 255);
48+
.example-container .example-diff-arrow {
49+
color: #fff;
50+
background-color: rgb(55, 55, 55);
51+
}
52+
53+
.example-container .example-diff-arrow .example-arrow {
54+
background-color: rgb(222, 34, 72);
5855
}
5956

6057
.example-container .example-no-radius {

‎docs/yarn.lock

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5954,6 +5954,14 @@ raw-body@2.5.1:
59545954
iconv-lite "0.4.24"
59555955
unpipe "1.0.0"
59565956

5957+
raw-loader@^4.0.2:
5958+
version "4.0.2"
5959+
resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.2.tgz#1aac6b7d1ad1501e66efdac1522c73e59a584eb6"
5960+
integrity sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==
5961+
dependencies:
5962+
loader-utils "^2.0.0"
5963+
schema-utils "^3.0.0"
5964+
59575965
rc@1.2.8, rc@^1.2.8:
59585966
version "1.2.8"
59595967
resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
@@ -6004,13 +6012,9 @@ react-dev-utils@^12.0.1:
60046012
strip-ansi "^6.0.1"
60056013
text-table "^0.2.0"
60066014

6007-
react-dom@18.2.0:
6008-
version "18.2.0"
6009-
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
6010-
integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
6011-
dependencies:
6012-
loose-envify "^1.1.0"
6013-
scheduler "^0.23.0"
6015+
"react-dom@link:../node_modules/react-dom":
6016+
version "0.0.0"
6017+
uid ""
60146018

60156019
react-error-overlay@^6.0.11:
60166020
version "6.0.11"
@@ -6104,20 +6108,13 @@ react-textarea-autosize@^8.3.2:
61046108
use-composed-ref "^1.3.0"
61056109
use-latest "^1.2.1"
61066110

6107-
react-tooltip@5.0.0:
6108-
version "5.0.0"
6109-
resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-5.0.0.tgz#5e68f2ebd46e47ad03ee348050ed444b603b657b"
6110-
integrity sha512-e7V+Umk8nKPIiyDqnFfwnx+5kYvwHyowwmqaKHkLU6plF6mwMFfDeh4pr+xe7urqWt2pyWmI2p5h2zPJTNGmRQ==
6111-
dependencies:
6112-
"@floating-ui/dom" "^1.0.4"
6113-
classnames "^2.3.2"
6111+
"react-tooltip@link:..":
6112+
version "0.0.0"
6113+
uid ""
61146114

6115-
react@18.2.0:
6116-
version "18.2.0"
6117-
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
6118-
integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
6119-
dependencies:
6120-
loose-envify "^1.1.0"
6115+
"react@link:../node_modules/react":
6116+
version "0.0.0"
6117+
uid ""
61216118

61226119
readable-stream@^2.0.1:
61236120
version "2.3.7"

‎src/App.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,15 @@ function App() {
4040
isOpen={isDarkOpen}
4141
setIsOpen={setIsDarkOpen}
4242
/>
43+
<Tooltip
44+
place="right"
45+
variant="info"
46+
anchorId="button3"
47+
content="My big tooltip content"
48+
isOpen={isDarkOpen}
49+
setIsOpen={setIsDarkOpen}
50+
styles={{ backgroundColor: '#ff00ff' }}
51+
/>
4352

4453
<section style={{ marginTop: '100px' }}>
4554
<p>

0 commit comments

Comments
 (0)