Skip to content

Commit 3a1ed77

Browse files
authored
Merge pull request #1041 from ReactTooltip/feat/add-manual-inject-styles-flow
feat: add manual inject styles function into the project
2 parents d3f2b34 + 424ef70 commit 3a1ed77

File tree

12 files changed

+374
-112
lines changed

12 files changed

+374
-112
lines changed

.npmignore

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,18 @@ coverage/
2525
.vscode/
2626
.husky/
2727
.github/
28+
rollup-plugins/
2829

2930
// misc files
3031
bundlesize.config.json
32+
prebuild.js
33+
jest.config.ts
3134

3235
// bundler - rollup
3336
rollup.config.dev.js
3437
rollup.config.prod.js
3538
rollup.config.types.js
39+
40+
// bundler - esbuild
41+
esbuild.config.dev.mjs
42+
esbuild.config.prod.mjs

docs/docs/examples/anchor-select.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ import { Tooltip } from 'react-tooltip';
6363

6464
:::info
6565

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!
6767

6868
:::
6969

@@ -99,7 +99,7 @@ Once you've understood how it works, you can write CSS selectors as complex as y
9999

100100
`[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.
101101

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, ...).
103103

104104
:::
105105

docs/docs/examples/render.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ The `render` prop can be used to render the tooltip content dynamically based on
3939
The function signature is as follows:
4040

4141
```ts
42-
;(render: { content: string | null; activeAnchor: HTMLElement | null }) => ChildrenType
42+
(render: { content: string | null; activeAnchor: HTMLElement | null }) => ChildrenType
4343
```
4444

4545
- `content` is available for quick access to the `data-tooltip-content` attribute on the anchor element

docs/docs/examples/styling.mdx

Lines changed: 60 additions & 6 deletions
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+
```

0 commit comments

Comments
 (0)