diff --git a/.npmignore b/.npmignore
index 6c86b701..e95b8803 100644
--- a/.npmignore
+++ b/.npmignore
@@ -25,11 +25,18 @@ coverage/
.vscode/
.husky/
.github/
+rollup-plugins/
// misc files
bundlesize.config.json
+prebuild.js
+jest.config.ts
// bundler - rollup
rollup.config.dev.js
rollup.config.prod.js
rollup.config.types.js
+
+// bundler - esbuild
+esbuild.config.dev.mjs
+esbuild.config.prod.mjs
diff --git a/docs/docs/examples/anchor-select.mdx b/docs/docs/examples/anchor-select.mdx
index 2332d51c..1539d9fb 100644
--- a/docs/docs/examples/anchor-select.mdx
+++ b/docs/docs/examples/anchor-select.mdx
@@ -63,7 +63,7 @@ import { Tooltip } from 'react-tooltip';
:::info
-A CSS selector for a specific id begins with a `.`. Don't forget to put it before the class on your selector!
+A CSS selector for a specific class begins with a `.`. Don't forget to put it before the class on your selector!
:::
@@ -99,7 +99,7 @@ Once you've understood how it works, you can write CSS selectors as complex as y
`[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.
-This example uses the name attribute, but it works for any HTML attribute (id, class, ...).
+This example uses the `name` attribute, but it works for any HTML attribute (id, class, ...).
:::
diff --git a/docs/docs/examples/render.mdx b/docs/docs/examples/render.mdx
index f5517adc..65b4a4ac 100644
--- a/docs/docs/examples/render.mdx
+++ b/docs/docs/examples/render.mdx
@@ -39,7 +39,7 @@ The `render` prop can be used to render the tooltip content dynamically based on
The function signature is as follows:
```ts
-;(render: { content: string | null; activeAnchor: HTMLElement | null }) => ChildrenType
+(render: { content: string | null; activeAnchor: HTMLElement | null }) => ChildrenType
```
- `content` is available for quick access to the `data-tooltip-content` attribute on the anchor element
diff --git a/docs/docs/examples/styling.mdx b/docs/docs/examples/styling.mdx
index 836448a0..ebce197f 100644
--- a/docs/docs/examples/styling.mdx
+++ b/docs/docs/examples/styling.mdx
@@ -6,11 +6,12 @@ sidebar_position: 1
How to customize tooltip styles in ReactTooltip styles.
-Tooltip arrow inherits its background color from tooltip (its parent).
+The tooltip arrow inherits its background color from the tooltip (its parent).
import { Tooltip } from 'react-tooltip'
import CodeBlock from '@theme/CodeBlock'
import TooltipStyles from '!!raw-loader!../../../src/components/Tooltip/styles.module.css'
+import TooltipCoreStyles from '!!raw-loader!../../../src/components/Tooltip/core-styles.module.css'
export const TooltipAnchor = ({ children, id, ...rest }) => {
return (
@@ -38,7 +39,7 @@ export const TooltipAnchor = ({ children, id, ...rest }) => {
### Inline Styling
-You can add styles into the tooltip with inline styling.
+You can add styles to the tooltip with inline styling.
```jsx
import { Tooltip } from 'react-tooltip'
@@ -101,11 +102,19 @@ import { Tooltip } from 'react-tooltip'
#### Explanation
-In this example, we are adding an extra level to the CSS classes. The following are the default styles for the tooltip:
+:::info
+Please note that **Core** styles are different from **Base** styles, for more information, please check the [Disabling ReactTooltip CSS](#disabling-reacttooltip-css) section.
+:::
+
+In this example, we are adding an extra level to the CSS classes. The following are the default **base** styles for the tooltip:
{TooltipStyles}
-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.
+And the following are the **core** styles for the tooltip:
+
+{TooltipCoreStyles}
+
+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.
```css
.example {
@@ -113,7 +122,7 @@ If we only add new classes like below, it will not work because it has the same
background-color: rgb(0, 247, 255);
}
-/** add next line only if you want to have tooltip arrow with a different background color from tooltip **/
+/** Add next line only if you want to have a tooltip arrow with a different background color from the tooltip **/
.example .example-arrow {
background-color: rgb(255, 0, 0);
}
@@ -127,7 +136,7 @@ To make this work as expected, we need to add another level of specificity:
background-color: rgb(0, 247, 255);
}
-/** add next line only if you want to have tooltip arrow with a different background color from tooltip **/
+/** Add next line only if you want to have a tooltip arrow with a different background color from the tooltip **/
.some-class-or-rule .example .example-arrow {
background-color: rgb(255, 0, 0);
}
@@ -358,3 +367,48 @@ import { Tooltip } from 'react-tooltip'
In summary, if you do it correctly you can use CSS specificity instead of `!important`.
:::
+
+### Disabling ReactTooltip CSS
+
+There are two ways to remove the ReactTooltip CSS:
+
+#### Environment Variables
+
+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`.
+
+- Core Styles: basic styles that are necessary to make the tooltip work.
+- Base Styles: visual styles to make the tooltip pretty.
+
+:::info
+
+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.
+
+:::
+
+| 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.
We strongly recommend to keep the core styles being injected into the project unless you know what you are doing. |
+| `REACT_TOOLTIP_DISABLE_BASE_STYLES` | `boolean` | no | `false` | `true` `false` | Environment variable to disable **base** styles from being injected into the page by ReactTooltip.
Those styles are just visual styles like colors, padding, etc... And can be disabled if you want to write your tooltip styles. |
+
+#### Using removeStyle function
+
+:::caution
+
+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.
+
+:::
+
+The function `removeStyle` accepts the following params:
+
+| 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 |
+
+```jsx
+import { removeStyle } from 'react-tooltip'
+
+...
+
+removeStyle() // removes the injected base style of ReactTooltip
+removeStyle({ type: 'core' }) // removes the injected core style of ReactTooltip - this can affect the basic functionality of ReactTooltip
+```
diff --git a/docs/docs/options.mdx b/docs/docs/options.mdx
index ed8d2b12..d3cf91e7 100644
--- a/docs/docs/options.mdx
+++ b/docs/docs/options.mdx
@@ -54,21 +54,21 @@ import { Tooltip } from 'react-tooltip';
#### Available attributes
-| name | type | required | default | values | description |
-| ------------------------------ | ---------- | --------- | ----------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
-| data-tooltip-id | string | false | | | The id set on the tooltip element (same as V4's `data-for`) |
-| data-tooltip-content | string | false | | | Content to de displayed in tooltip (`html` is priorized over `content`) |
-| data-tooltip-html | string | false | | | HTML content to de displayed in tooltip |
-| data-tooltip-place | string | false | `top` | `top` `top-start` `top-end` `right` `right-start` `right-end` `bottom` `bottom-start` `bottom-end` `left` `left-start` `left-end` | Position relative to the anchor element where the tooltip will be rendered (if possible) |
-| data-tooltip-offset | number | false | `10` | any `number` | Space between the tooltip element and anchor element (arrow not included in calculation) |
-| data-tooltip-variant | string | false | `dark` | `dark` `light` `success` `warning` `error` `info` | Change the tooltip style with default presets |
-| data-tooltip-wrapper | string | false | `div` | `div` `span` | Element wrapper for the tooltip container, can be `div`, `span`, `p` or any valid HTML tag |
-| ~~data-tooltip-events~~ | ~~string~~ | ~~false~~ | ~~`hover`~~ | ~~`hover click` `hover` `click`~~ | ~~Events to watch for when handling the tooltip state~~
**DEPRECATED**
Use `openOnClick` tooltip prop instead |
-| data-tooltip-position-strategy | 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 |
-| data-tooltip-delay-show | number | false | | any `number` | The delay (in ms) before showing the tooltip |
-| data-tooltip-delay-hide | number | false | | any `number` | The delay (in ms) before hiding the tooltip |
-| data-tooltip-float | boolean | false | `false` | `true` `false` | Tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`) |
-| data-tooltip-hidden | boolean | false | `false` | `true` `false` | Tooltip will not be shown |
+| name | type | required | default | values | description |
+| ------------------------------ | ---------- | --------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| data-tooltip-id | string | false | | | The id set on the tooltip element (same as V4's `data-for`) |
+| data-tooltip-content | string | false | | | Content to be displayed in the tooltip (`html` is priorized over `content`) |
+| data-tooltip-html | string | false | | | HTML content to be displayed in tooltip |
+| data-tooltip-place | string | false | `top` | `top` `top-start` `top-end` `right` `right-start` `right-end` `bottom` `bottom-start` `bottom-end` `left` `left-start` `left-end` | Position relative to the anchor element where the tooltip will be rendered (if possible) |
+| data-tooltip-offset | number | false | `10` | any `number` | Space between the tooltip element and anchor element (arrow not included in the calculation) |
+| data-tooltip-variant | string | false | `dark` | `dark` `light` `success` `warning` `error` `info` | Change the tooltip style with default presets |
+| data-tooltip-wrapper | string | false | `div` | `div` `span` | Element wrapper for the tooltip container, can be `div`, `span`, `p` or any valid HTML tag |
+| ~~data-tooltip-events~~ | ~~string~~ | ~~false~~ | ~~`hover`~~ | ~~`hover click` `hover` `click`~~ | ~~Events to watch for when handling the tooltip state~~
**DEPRECATED**
Use `openOnClick` tooltip prop instead |
+| data-tooltip-position-strategy | 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 |
+| data-tooltip-delay-show | number | false | | any `number` | The delay (in ms) before showing the tooltip |
+| data-tooltip-delay-hide | number | false | | any `number` | The delay (in ms) before hiding the tooltip |
+| data-tooltip-float | boolean | false | `false` | `true` `false` | Tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`) |
+| data-tooltip-hidden | boolean | false | `false` | `true` `false` | Tooltip will not be shown |
### Props
@@ -87,37 +87,48 @@ import { Tooltip } from 'react-tooltip';
#### Available props
-| name | type | required | default | values | description |
-| ------------------ | -------------------------- | -------- | ------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className` | `string` | no | | | Class name to customize tooltip element. You can also use the default class `react-tooltip` which is set internally |
-| `classNameArrow` | `string` | no | | | Class name to customize tooltip arrow element. You can also use the default class `react-tooltip-arrow` which is set internally |
-| `content` | `string` | no | | | Content to de displayed in tooltip (`html` prop is priorized over `content`) |
-| ~~`html`~~ | ~~`string`~~ | ~~no~~ | | | ~~HTML content to de displayed in tooltip~~
**DEPRECATED**
Use `children` or `render` instead |
-| `render` | `function` | no | | | A function which receives a ref to the currently active anchor element and returns the content for the tooltip. Check the [examples](./examples/render.mdx) |
-| `place` | `string` | no | `top` | `top` `top-start` `top-end` `right` `right-start` `right-end` `bottom` `bottom-start` `bottom-end` `left` `left-start` `left-end` | Position relative to the anchor element where the tooltip will be rendered (if possible) |
-| `offset` | `number` | no | `10` | any `number` | Space between the tooltip element and anchor element (arrow not included in calculation) |
-| `id` | `string` | no | | any `string` | The tooltip id. Must be set when using `data-tooltip-id` on the anchor element |
-| ~~`anchorId`~~ | ~~`string`~~ | ~~no~~ | | ~~any `string`~~ | ~~The id for the anchor element for the tooltip~~
**DEPRECATED**
Use `data-tooltip-id` or `anchorSelect` instead |
-| `anchorSelect` | CSS selector | no | | any valid CSS selector | The selector for the anchor elements. Check [the examples](./examples/anchor-select.mdx) for more details |
-| `variant` | `string` | no | `dark` | `dark` `light` `success` `warning` `error` `info` | Change the tooltip style with default presets |
-| `wrapper` | HTML tag | no | `div` | `div` `span` `p` ... | Element wrapper for the tooltip container, can be `div`, `span`, `p` or any valid HTML tag |
-| `children` | React node | no | `undefined` | valid React children | The tooltip children have lower priority compared to the `content` prop and the `data-tooltip-content` attribute. Useful for setting default content |
-| ~~`events`~~ | ~~`string[]`~~ | ~~no~~ | ~~`hover`~~ | ~~`hover` `click`~~ | ~~Events to watch for when handling the tooltip state~~
**DEPRECATED**
Use `openOnClick` tooltip prop instead |
-| `openOnClick` | `boolean` | no | `false` | `true` `false` | Controls whether the tooltip should open when clicking (`true`) or hovering (`false`) the anchor element |
-| `positionStrategy` | `string` | no | `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 |
-| `delayShow` | `number` | no | | any `number` | The delay (in ms) before showing the tooltip |
-| `delayHide` | `number` | no | | any `number` | The delay (in ms) before hiding the tooltip |
-| `float` | `boolean` | no | `false` | `true` `false` | Tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`) |
-| `hidden` | `boolean` | no | `false` | `true` `false` | Tooltip will not be shown |
-| `noArrow` | `boolean` | no | `false` | `true` `false` | Tooltip arrow will not be shown |
-| `clickable` | `boolean` | no | `false` | `true` `false` | Allow interaction with elements inside the tooltip. Useful when using buttons and inputs |
-| `closeOnEsc` | `boolean` | no | `false` | `true` `false` | Pressing escape key will close the tooltip |
-| `closeOnScroll` | `boolean` | no | `false` | `true` `false` | Scrolling will close the tooltip (for this to work, scroll element must be either the root html tag, the tooltip parent, or the anchor parent) |
-| `closeOnEsc` | `boolean` | no | `false` | `true` `false` | Resizing the window will close the tooltip |
-| `style` | `CSSProperties` | no | | a React inline style | Add inline styles directly to the tooltip |
-| `position` | `{ x: number; y: number }` | no | | any `number` value for both `x` and `y` | Override the tooltip position on the DOM |
-| `isOpen` | `boolean` | no | 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`) |
-| `setIsOpen` | `function` | no | | | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip |
-| `afterShow` | `function` | no | | | A function to be called after the tooltip is shown |
-| `afterHide` | `function` | no | | | A function to be called after the tooltip is hidden |
-| `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 |
+| name | type | required | default | values | description |
+| ------------------ | -------------------------- | -------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className` | `string` | no | | | Class name to customize tooltip element. You can also use the default class `react-tooltip` which is set internally |
+| `classNameArrow` | `string` | no | | | Class name to customize tooltip arrow element. You can also use the default class `react-tooltip-arrow` which is set internally |
+| `content` | `string` | no | | | Content to de displayed in tooltip (`html` prop is priorized over `content`) |
+| ~~`html`~~ | ~~`string`~~ | ~~no~~ | | | ~~HTML content to de displayed in tooltip~~
**DEPRECATED**
Use `children` or `render` instead |
+| `render` | `function` | no | | | A function which receives a ref to the currently active anchor element and returns the content for the tooltip. Check the [examples](./examples/render.mdx) |
+| `place` | `string` | no | `top` | `top` `top-start` `top-end` `right` `right-start` `right-end` `bottom` `bottom-start` `bottom-end` `left` `left-start` `left-end` | Position relative to the anchor element where the tooltip will be rendered (if possible) |
+| `offset` | `number` | no | `10` | any `number` | Space between the tooltip element and anchor element (arrow not included in calculation) |
+| `id` | `string` | no | | any `string` | The tooltip id. Must be set when using `data-tooltip-id` on the anchor element |
+| ~~`anchorId`~~ | ~~`string`~~ | ~~no~~ | | ~~any `string`~~ | ~~The id for the anchor element for the tooltip~~
**DEPRECATED**
Use `data-tooltip-id` or `anchorSelect` instead |
+| `anchorSelect` | CSS selector | no | | any valid CSS selector | The selector for the anchor elements. Check [the examples](./examples/anchor-select.mdx) for more details |
+| `variant` | `string` | no | `dark` | `dark` `light` `success` `warning` `error` `info` | Change the tooltip style with default presets |
+| `wrapper` | HTML tag | no | `div` | `div` `span` `p` ... | Element wrapper for the tooltip container, can be `div`, `span`, `p` or any valid HTML tag |
+| `children` | React node | no | `undefined` | valid React children | The tooltip children have lower priority compared to the `content` prop and the `data-tooltip-content` attribute. Useful for setting default content |
+| ~~`events`~~ | ~~`string[]`~~ | ~~no~~ | ~~`hover`~~ | ~~`hover` `click`~~ | ~~Events to watch for when handling the tooltip state~~
**DEPRECATED**
Use `openOnClick` tooltip prop instead |
+| `openOnClick` | `boolean` | no | `false` | `true` `false` | Controls whether the tooltip should open when clicking (`true`) or hovering (`false`) the anchor element |
+| `positionStrategy` | `string` | no | `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 |
+| `delayShow` | `number` | no | | any `number` | The delay (in ms) before showing the tooltip |
+| `delayHide` | `number` | no | | any `number` | The delay (in ms) before hiding the tooltip |
+| `float` | `boolean` | no | `false` | `true` `false` | Tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`) |
+| `hidden` | `boolean` | no | `false` | `true` `false` | Tooltip will not be shown |
+| `noArrow` | `boolean` | no | `false` | `true` `false` | Tooltip arrow will not be shown |
+| `clickable` | `boolean` | no | `false` | `true` `false` | Allow interaction with elements inside the tooltip. Useful when using buttons and inputs |
+| `closeOnEsc` | `boolean` | no | `false` | `true` `false` | Pressing escape key will close the tooltip |
+| `closeOnScroll` | `boolean` | no | `false` | `true` `false` | Scrolling will close the tooltip (for this to work, scroll element must be either the root html tag, the tooltip parent, or the anchor parent) |
+| `closeOnEsc` | `boolean` | no | `false` | `true` `false` | Resizing the window will close the tooltip |
+| `style` | `CSSProperties` | no | | a React inline style | Add inline styles directly to the tooltip |
+| `position` | `{ x: number; y: number }` | no | | any `number` value for both `x` and `y` | Override the tooltip position on the DOM |
+| `isOpen` | `boolean` | no | 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`) |
+| `setIsOpen` | `function` | no | | | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip |
+| `afterShow` | `function` | no | | | A function to be called after the tooltip is shown |
+| `afterHide` | `function` | no | | | A function to be called after the tooltip is hidden |
+| `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 |
+
+### Envs
+
+We have some environment variables that can be used to enable or disable some behavior of the ReactTooltip, normally used on the server side.
+
+#### Available environment variables:
+
+| 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.
We strongly recommend to keep the core styles being injected into the project unless you know what you are doing. |
+| `REACT_TOOLTIP_DISABLE_BASE_STYLES` | `boolean` | no | `false` | `true` `false` | Environment variable to disable **base** styles from being injected into the page by ReactTooltip.
Those styles are just visual styles like colors, padding, etc... And can be disabled if you want to write your tooltip styles. |
diff --git a/rollup-plugins/replace-before-save-file.js b/rollup-plugins/replace-before-save-file.js
new file mode 100644
index 00000000..0fdf4383
--- /dev/null
+++ b/rollup-plugins/replace-before-save-file.js
@@ -0,0 +1,87 @@
+/* eslint-disable no-await-in-loop */
+import { readFile, writeFile } from 'node:fs/promises'
+
+const cssMinifier = (css) =>
+ css
+ .replace(/([^0-9a-zA-Z.#])\s+/g, '$1')
+ .replace(/\s([^0-9a-zA-Z.#]+)/g, '$1')
+ .replace(/;}/g, '}')
+ .replace(/\/\*.*?\*\//g, '')
+
+/* eslint-disable no-param-reassign */
+/**
+ * This plugin is very similar to the `replace`, but instead of only
+ * check for strings, this plugin check for everything that matches the query.
+ * expected input: { 'lorem:': 'ipsum' }
+ * or
+ * expected input: { 'lorem:': 'file:myfile.css' }
+ */
+export default function replaceBeforeSaveFile(replaceObject = {}) {
+ return {
+ // this name will show up in warnings and errors of rollup execution
+ name: 'modify-generated-files',
+ /**
+ * This write bundle is executed after the files being written.
+ * Docs: https://rollupjs.org/plugin-development/#writebundle
+ */
+ async writeBundle(options, bundle) {
+ const replaceKeys = Object.keys(replaceObject)
+ if (replaceKeys.length > 0) {
+ const files = Object.keys(bundle)
+
+ let file = null
+ let key = null
+ let regex = null
+ for (let index = 0; index < files.length; index += 1) {
+ file = files[index]
+
+ if (file && bundle[file].code) {
+ for (let indexKeys = 0; indexKeys < replaceKeys.length; indexKeys += 1) {
+ key = replaceKeys[indexKeys]
+ regex = new RegExp(key, 'g')
+
+ if (bundle[file].code.includes(key)) {
+ if (key.includes('css') && replaceObject[key].includes('file:')) {
+ const [, fileName] = replaceObject[key].split(':')
+ const fileContent = await readFile(`./dist/${fileName}`, 'utf8')
+
+ const splittedCSSContent = fileContent.split('/** end - core styles **/')
+
+ if (key.includes('core-css')) {
+ if (options.file.includes('.min')) {
+ bundle[file].code = bundle[file].code.replace(
+ regex,
+ `\`${cssMinifier(splittedCSSContent[0])}\``,
+ )
+ } else {
+ bundle[file].code = bundle[file].code.replace(
+ regex,
+ `\`${splittedCSSContent[0]}\``,
+ )
+ }
+ } else if (!key.includes('core-css')) {
+ if (options.file.includes('.min')) {
+ bundle[file].code = bundle[file].code.replace(
+ regex,
+ `\`${cssMinifier(splittedCSSContent[1])}\``,
+ )
+ } else {
+ bundle[file].code = bundle[file].code.replace(
+ regex,
+ `\`${splittedCSSContent[1]}\``,
+ )
+ }
+ }
+ } else {
+ bundle[file].code = bundle[file].code.replace(regex, replaceObject[key])
+ }
+
+ await writeFile(options.file, bundle[file].code)
+ }
+ }
+ }
+ }
+ }
+ },
+ }
+}
diff --git a/rollup.config.prod.js b/rollup.config.prod.js
index 2157a06f..7c29d6e8 100644
--- a/rollup.config.prod.js
+++ b/rollup.config.prod.js
@@ -7,6 +7,7 @@ import { nodeResolve } from '@rollup/plugin-node-resolve'
import ts from '@rollup/plugin-typescript'
import { terser } from 'rollup-plugin-terser'
import typescript from 'typescript'
+import replaceBeforeSaveFile from './rollup-plugins/replace-before-save-file.js'
import * as pkg from './package.json'
const input = ['src/index.tsx']
@@ -27,18 +28,9 @@ const external = [
]
const buildFormats = [
- /**
- * Temporary build to keep the extracted CSS file.
- * I don't want to do a major release now with only the CSS change,
- * so, we will keep the css being exported by the lib and now
- * we will inject the css into the head by default.
- * The CSS file import is deprecated and the file is only
- * for style reference now.
- */
{
file: 'dist/react-tooltip.mjs',
format: 'es',
- extractCSS: true,
},
{
file: 'dist/react-tooltip.umd.js',
@@ -74,37 +66,41 @@ const sharedPlugins = [
typescript,
tsconfig: './tsconfig.json',
noEmitOnError: false,
- // declaration: true,
- // declarationDir: './build',
}),
commonjs({
include: 'node_modules/**',
}),
]
// this step is just to build the minified javascript files
-const minifiedBuildFormats = buildFormats.map(({ file, extractCSS, ...rest }) => ({
+const minifiedBuildFormats = buildFormats.map(({ file, ...rest }) => ({
file: file.replace(/(\.[cm]?js)$/, '.min$1'),
...rest,
minify: true,
- extractCSS,
plugins: [terser({ compress: { directives: false } }), filesize()],
}))
const allBuildFormats = [...buildFormats, ...minifiedBuildFormats]
const config = allBuildFormats.map(
- ({ file, format, globals, plugins: specificPlugins, minify, extractCSS }) => {
+ ({ file, format, globals, plugins: specificPlugins, minify }) => {
const plugins = [
...sharedPlugins,
postcss({
- // eslint-disable-next-line no-nested-ternary
- extract: extractCSS ? (minify ? 'react-tooltip.min.css' : 'react-tooltip.css') : false, // this will generate a specific file and override on multiples build, but the css will be the same
+ extract: minify ? 'react-tooltip.min.css' : 'react-tooltip.css', // this will generate a specific file and override on multiples build, but the css will be the same
autoModules: true,
include: '**/*.css',
extensions: ['.css'],
plugins: [],
minimize: Boolean(minify),
}),
+ replaceBeforeSaveFile({
+ // this only works for the react-tooltip.css because it's the first file
+ // writen in our build process before the javascript files.
+ "'react-tooltip-css-placeholder'": 'file:react-tooltip.css',
+ '"react-tooltip-css-placeholder"': 'file:react-tooltip.css',
+ "'react-tooltip-core-css-placeholder'": 'file:react-tooltip.css',
+ '"react-tooltip-core-css-placeholder"': 'file:react-tooltip.css',
+ }),
]
if (specificPlugins && specificPlugins.length) {
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index 4b79105f..f5ded4f3 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -5,6 +5,7 @@ import { useTooltip } from 'components/TooltipProvider'
import useIsomorphicLayoutEffect from 'utils/use-isomorphic-layout-effect'
import { getScrollParent } from 'utils/get-scroll-parent'
import { computeTooltipPosition } from 'utils/compute-positions'
+import coreStyles from './core-styles.module.css'
import styles from './styles.module.css'
import type { IPosition, ITooltip, PlacesType } from './TooltipTypes'
@@ -583,14 +584,15 @@ const Tooltip = ({
role="tooltip"
className={classNames(
'react-tooltip',
+ coreStyles['tooltip'],
styles['tooltip'],
styles[variant],
className,
`react-tooltip__place-${actualPlacement}`,
{
- [styles['show']]: canShow,
- [styles['fixed']]: positionStrategy === 'fixed',
- [styles['clickable']]: clickable,
+ [coreStyles['show']]: canShow,
+ [coreStyles['fixed']]: positionStrategy === 'fixed',
+ [coreStyles['clickable']]: clickable,
},
)}
style={{ ...externalStyles, ...inlineStyles }}
@@ -598,13 +600,19 @@ const Tooltip = ({
>
{content}
diff --git a/src/components/Tooltip/core-styles.module.css b/src/components/Tooltip/core-styles.module.css
new file mode 100644
index 00000000..bc317a17
--- /dev/null
+++ b/src/components/Tooltip/core-styles.module.css
@@ -0,0 +1,34 @@
+.tooltip {
+ visibility: hidden;
+ position: absolute;
+ top: 0;
+ left: 0;
+ pointer-events: none;
+ opacity: 0;
+ transition: opacity 0.3s ease-out;
+ will-change: opacity, visibility;
+}
+
+.fixed {
+ position: fixed;
+}
+
+.arrow {
+ position: absolute;
+ background: inherit;
+}
+
+.noArrow {
+ display: none;
+}
+
+.clickable {
+ pointer-events: auto;
+}
+
+.show {
+ visibility: visible;
+ opacity: var(--rt-opacity);
+}
+
+/** end - core styles **/
diff --git a/src/components/Tooltip/styles.module.css b/src/components/Tooltip/styles.module.css
index 63cd8be0..6ab5e964 100644
--- a/src/components/Tooltip/styles.module.css
+++ b/src/components/Tooltip/styles.module.css
@@ -1,43 +1,16 @@
.tooltip {
- visibility: hidden;
- width: max-content;
- position: absolute;
- top: 0;
- left: 0;
padding: 8px 16px;
border-radius: 3px;
font-size: 90%;
- pointer-events: none;
- opacity: 0;
- transition: opacity 0.3s ease-out;
- will-change: opacity, visibility;
-}
-
-.fixed {
- position: fixed;
+ width: max-content;
}
.arrow {
- position: absolute;
- background: inherit;
width: 8px;
height: 8px;
transform: rotate(45deg);
}
-.noArrow {
- display: none;
-}
-
-.clickable {
- pointer-events: auto;
-}
-
-.show {
- visibility: visible;
- opacity: var(--rt-opacity);
-}
-
/** Types variant **/
.dark {
background: var(--rt-color-dark);
diff --git a/src/index.tsx b/src/index.tsx
index 326c4083..d8c11be7 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,7 @@
import './tokens.css'
+
+import { injectStyle } from 'utils/handle-style'
+
import type {
ChildrenType,
DataAttribute,
@@ -13,6 +16,13 @@ import type {
import type { ITooltipController } from './components/TooltipController/TooltipControllerTypes'
import type { ITooltipWrapper } from './components/TooltipProvider/TooltipProviderTypes'
+// those content will be replaced in build time with the `react-tooltip.css` builded content
+const TooltipCoreStyles = 'react-tooltip-core-css-placeholder'
+const TooltipStyles = 'react-tooltip-css-placeholder'
+
+injectStyle({ css: TooltipCoreStyles, type: 'core' })
+injectStyle({ css: TooltipStyles })
+
export { TooltipController as Tooltip } from './components/TooltipController'
export { TooltipProvider, TooltipWrapper } from './components/TooltipProvider'
export type {
@@ -28,3 +38,5 @@ export type {
IPosition,
Middleware,
}
+
+export { removeStyle } from './utils/handle-style'
diff --git a/src/utils/handle-style.ts b/src/utils/handle-style.ts
new file mode 100644
index 00000000..083c274c
--- /dev/null
+++ b/src/utils/handle-style.ts
@@ -0,0 +1,80 @@
+// This is the ID for the core styles of ReactTooltip
+const REACT_TOOLTIP_CORE_STYLES_ID = 'react-tooltip-core-styles'
+// This is the ID for the visual styles of ReactTooltip
+const REACT_TOOLTIP_BASE_STYLES_ID = 'react-tooltip-base-styles'
+
+function injectStyle({
+ css,
+ id = REACT_TOOLTIP_BASE_STYLES_ID,
+ type = 'base',
+ ref,
+}: {
+ css: string
+ id?: string
+ type?: string
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ ref?: any
+}) {
+ if (type === 'core' && process.env.REACT_TOOLTIP_DISABLE_CORE_STYLES) {
+ return
+ }
+
+ if (type !== 'core' && process.env.REACT_TOOLTIP_DISABLE_BASE_STYLES) {
+ return
+ }
+
+ if (type === 'core') {
+ // eslint-disable-next-line no-param-reassign
+ id = REACT_TOOLTIP_CORE_STYLES_ID
+ }
+
+ if (!ref) {
+ // eslint-disable-next-line no-param-reassign
+ ref = {}
+ }
+ const { insertAt } = ref
+
+ if (!css || typeof document === 'undefined' || document.getElementById(id)) {
+ return
+ }
+
+ const head = document.head || document.getElementsByTagName('head')[0]
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const style: any = document.createElement('style')
+ style.id = id
+ style.type = 'text/css'
+
+ if (insertAt === 'top') {
+ if (head.firstChild) {
+ head.insertBefore(style, head.firstChild)
+ } else {
+ head.appendChild(style)
+ }
+ } else {
+ head.appendChild(style)
+ }
+
+ if (style.styleSheet) {
+ style.styleSheet.cssText = css
+ } else {
+ style.appendChild(document.createTextNode(css))
+ }
+}
+
+function removeStyle({
+ type = 'base',
+ id = REACT_TOOLTIP_BASE_STYLES_ID,
+}: {
+ type?: string
+ id?: string
+} = {}) {
+ if (type === 'core') {
+ // eslint-disable-next-line no-param-reassign
+ id = REACT_TOOLTIP_CORE_STYLES_ID
+ }
+
+ const style = document.getElementById(id)
+ style?.remove()
+}
+
+export { injectStyle, removeStyle }