You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/docs/examples/anchor-select.mdx
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -63,7 +63,7 @@ import { Tooltip } from 'react-tooltip';
63
63
64
64
:::info
65
65
66
-
A CSS selector for a specific id begins with a `.`. Don't forget to put it before the class on your selector!
66
+
A CSS selector for a specific class begins with a `.`. Don't forget to put it before the class on your selector!
67
67
68
68
:::
69
69
@@ -99,7 +99,7 @@ Once you've understood how it works, you can write CSS selectors as complex as y
99
99
100
100
`[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.
101
101
102
-
This example uses the name attribute, but it works for any HTML attribute (id, class, ...).
102
+
This example uses the `name` attribute, but it works for any HTML attribute (id, class, ...).
You can add styles into the tooltip with inline styling.
42
+
You can add styles to the tooltip with inline styling.
42
43
43
44
```jsx
44
45
import { Tooltip } from'react-tooltip'
@@ -101,19 +102,27 @@ import { Tooltip } from 'react-tooltip'
101
102
102
103
#### Explanation
103
104
104
-
In this example, we are adding an extra level to the CSS classes. The following are the default styles for the tooltip:
105
+
:::info
106
+
Please note that **Core** styles are different from **Base** styles, for more information, please check the [Disabling ReactTooltip CSS](#disabling-reacttooltip-css) section.
107
+
:::
108
+
109
+
In this example, we are adding an extra level to the CSS classes. The following are the default **base** styles for the tooltip:
If we only add new classes like below, it will not work because it has the same level of specificity as the default dark variant.
109
118
110
119
```css
111
120
.example {
112
121
color: #222;
113
122
background-color: rgb(0, 247, 255);
114
123
}
115
124
116
-
/** add next line only if you want to have tooltip arrow with a different background color from tooltip **/
125
+
/** Add next line only if you want to have a tooltip arrow with a different background color from the tooltip **/
117
126
.example.example-arrow {
118
127
background-color: rgb(255, 0, 0);
119
128
}
@@ -127,7 +136,7 @@ To make this work as expected, we need to add another level of specificity:
127
136
background-color: rgb(0, 247, 255);
128
137
}
129
138
130
-
/** add next line only if you want to have tooltip arrow with a different background color from tooltip **/
139
+
/** Add next line only if you want to have a tooltip arrow with a different background color from the tooltip **/
131
140
.some-class-or-rule.example.example-arrow {
132
141
background-color: rgb(255, 0, 0);
133
142
}
@@ -358,3 +367,48 @@ import { Tooltip } from 'react-tooltip'
358
367
In summary, if you do it correctly you can use CSS specificity instead of `!important`.
359
368
360
369
:::
370
+
371
+
### Disabling ReactTooltip CSS
372
+
373
+
There are two ways to remove the ReactTooltip CSS:
374
+
375
+
#### Environment Variables
376
+
377
+
You can prevent ReactTooltip from injecting styles into the page by using environment variables, we currently support two types of styles: `core styles` and `base styles`.
378
+
379
+
- Core Styles: basic styles that are necessary to make the tooltip work.
380
+
- Base Styles: visual styles to make the tooltip pretty.
381
+
382
+
:::info
383
+
384
+
We strongly recommend using this way because it's cleaner and better for performance to choose not to inject the styles instead of injecting and removing them when the page loads.
385
+
386
+
:::
387
+
388
+
| name | type | required | default | values | description |
|`REACT_TOOLTIP_DISABLE_CORE_STYLES`|`boolean`| no |`false`|`true``false`| Environment variable to disable **core** styles from being injected into the page by ReactTooltip.<br /><br /> We strongly recommend to keep the core styles being injected into the project unless you know what you are doing. |
391
+
|`REACT_TOOLTIP_DISABLE_BASE_STYLES`|`boolean`| no |`false`|`true``false`| Environment variable to disable **base** styles from being injected into the page by ReactTooltip.<br /><br /> Those styles are just visual styles like colors, padding, etc... And can be disabled if you want to write your tooltip styles. |
392
+
393
+
#### Using removeStyle function
394
+
395
+
:::caution
396
+
397
+
Only use this method if you really can't use the environment variables to disable the style injection of ReactTooltip because this can impact the page performance.
398
+
399
+
:::
400
+
401
+
The function `removeStyle` accepts the following params:
402
+
403
+
| name | type | required | default | values | description |
| type | string | no |`base`|`base``core`| If `core` is defined, the core styles will be removed from the page, if nothing is defined, `base` styles will be removed as default value |
406
+
407
+
```jsx
408
+
import { removeStyle } from'react-tooltip'
409
+
410
+
...
411
+
412
+
removeStyle() // removes the injected base style of ReactTooltip
413
+
removeStyle({ type:'core' }) // removes the injected core style of ReactTooltip - this can affect the basic functionality of ReactTooltip
0 commit comments