Skip to content

Commit ec1c3d9

Browse files
danielbariondanielbarion
committed
docs: update docs with handling react tooltip styles sections
1 parent 80fc7d2 commit ec1c3d9

File tree

2 files changed

+75
-10
lines changed

2 files changed

+75
-10
lines changed

‎docs/docs/examples/styling.mdx

+60-6
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@ sidebar_position: 1
66

77
How to customize tooltip styles in ReactTooltip styles.
88

9-
Tooltip arrow inherits its background color from tooltip (its parent).
9+
The tooltip arrow inherits its background color from the tooltip (its parent).
1010

1111
import { Tooltip } from 'react-tooltip'
1212
import CodeBlock from '@theme/CodeBlock'
1313
import TooltipStyles from '!!raw-loader!../../../src/components/Tooltip/styles.module.css'
14+
import TooltipCoreStyles from '!!raw-loader!../../../src/components/Tooltip/core-styles.module.css'
1415

1516
export const TooltipAnchor = ({ children, id, ...rest }) => {
1617
return (
@@ -38,7 +39,7 @@ export const TooltipAnchor = ({ children, id, ...rest }) => {
3839

3940
### Inline Styling
4041

41-
You can add styles into the tooltip with inline styling.
42+
You can add styles to the tooltip with inline styling.
4243

4344
```jsx
4445
import { Tooltip } from 'react-tooltip'
@@ -101,19 +102,27 @@ import { Tooltip } from 'react-tooltip'
101102

102103
#### Explanation
103104

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:
105110

106111
<CodeBlock language="css">{TooltipStyles}</CodeBlock>
107112

108-
If we only add new classes like below, it will not work because it has the same level of specificity than the default dark variant.
113+
And the following are the **core** styles for the tooltip:
114+
115+
<CodeBlock language="css">{TooltipCoreStyles}</CodeBlock>
116+
117+
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.
109118

110119
```css
111120
.example {
112121
color: #222;
113122
background-color: rgb(0, 247, 255);
114123
}
115124

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 **/
117126
.example .example-arrow {
118127
background-color: rgb(255, 0, 0);
119128
}
@@ -127,7 +136,7 @@ To make this work as expected, we need to add another level of specificity:
127136
background-color: rgb(0, 247, 255);
128137
}
129138

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 **/
131140
.some-class-or-rule .example .example-arrow {
132141
background-color: rgb(255, 0, 0);
133142
}
@@ -358,3 +367,48 @@ import { Tooltip } from 'react-tooltip'
358367
In summary, if you do it correctly you can use CSS specificity instead of `!important`.
359368

360369
:::
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 |
389+
| ----------------------------------- | --------- | -------- | ------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
390+
| `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 |
404+
| ---- | ------ | -------- | ------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
405+
| 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
414+
```

‎docs/docs/options.mdx

+15-4
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,10 @@ import { Tooltip } from 'react-tooltip';
5757
| name | type | required | default | values | description |
5858
| ------------------------------ | ---------- | --------- | ----------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
5959
| data-tooltip-id | string | false | | | The id set on the tooltip element (same as V4's `data-for`) |
60-
| data-tooltip-content | string | false | | | Content to de displayed in tooltip (`html` is priorized over `content`) |
61-
| data-tooltip-html | string | false | | | HTML content to de displayed in tooltip |
60+
| data-tooltip-content | string | false | | | Content to be displayed in the tooltip (`html` is priorized over `content`) |
61+
| data-tooltip-html | string | false | | | HTML content to be displayed in tooltip |
6262
| data-tooltip-place | string | false | `top` | `top` `right` `bottom` `left` | Position relative to the anchor element where the tooltip will be rendered (if possible) |
63-
| data-tooltip-offset | number | false | `10` | any `number` | Space between the tooltip element and anchor element (arrow not included in calculation) |
63+
| data-tooltip-offset | number | false | `10` | any `number` | Space between the tooltip element and anchor element (arrow not included in the calculation) |
6464
| data-tooltip-variant | string | false | `dark` | `dark` `light` `success` `warning` `error` `info` | Change the tooltip style with default presets |
6565
| data-tooltip-wrapper | string | false | `div` | `div` `span` | Element wrapper for the tooltip container, can be `div`, `span`, `p` or any valid HTML tag |
6666
| ~~data-tooltip-events~~ | ~~string~~ | ~~false~~ | ~~`hover`~~ | ~~`hover click` `hover` `click`~~ | ~~Events to watch for when handling the tooltip state~~ <br/>**DEPRECATED**<br/>Use `openOnClick` tooltip prop instead |
@@ -112,7 +112,7 @@ import { Tooltip } from 'react-tooltip';
112112
| `noArrow` | `boolean` | no | `false` | `true` `false` | Tooltip arrow will not be shown |
113113
| `clickable` | `boolean` | no | `false` | `true` `false` | Allow interaction with elements inside the tooltip. Useful when using buttons and inputs |
114114
| `closeOnEsc` | `boolean` | no | `false` | `true` `false` | Pressing escape key will close the tooltip |
115-
| `closeOnScroll` | `boolean` | no | `false` | `true` `false` | Scrolling anywhere on the window will close the tooltip |
115+
| `closeOnScroll` | `boolean` | no | `false` | `true` `false` | Scrolling anywhere on the window will close the tooltip |
116116
| `closeOnEsc` | `boolean` | no | `false` | `true` `false` | Resizing the window will close the tooltip |
117117
| `style` | `CSSProperties` | no | | a React inline style | Add inline styles directly to the tooltip |
118118
| `position` | `{ x: number; y: number }` | no | | any `number` value for both `x` and `y` | Override the tooltip position on the DOM |
@@ -121,3 +121,14 @@ import { Tooltip } from 'react-tooltip';
121121
| `afterShow` | `function` | no | | | A function to be called after the tooltip is shown |
122122
| `afterHide` | `function` | no | | | A function to be called after the tooltip is hidden |
123123
| `middlewares` | `Middleware[]` | no | | array of valid `floating-ui` middlewares | Allows for advanced customization. Check the [`floating-ui` docs](https://floating-ui.com/docs/middleware) for more information |
124+
125+
### Envs
126+
127+
We have some environment variables that can be used to enable or disable some behavior of the ReactTooltip, normally used on the server side.
128+
129+
#### Available environment variables:
130+
131+
| name | type | required | default | values | description |
132+
| ----------------------------------- | --------- | -------- | ------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
133+
| `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. |
134+
| `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. |

0 commit comments

Comments
 (0)