Merge branch 'master' into feat/add-border-option

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,20 +1,26 @@
 ---
 name: Bug report
-about: Create a report to help us improve
+about: Create a report to help us improve. Please check our troubleshooting docs beforehand.
 title: "[BUG]"
 labels: Bug
 assignees: ''
 
 ---
 
-**Describe the bug**
+# Check the troubleshooting page before opening an issue!
+
+Make sure your problem isn't already covered at the troubleshooting page: https://react-tooltip.com/docs/troubleshooting
+
+----
+
+**Bug description**
 A clear and concise description of what the bug is.
 
 **Version of Package**
 vX.X.X
 
 **To Reproduce**
-Steps to reproduce the behavior
+Steps to reproduce the behavior.
 
 **Expected behavior**
 A clear and concise description of what you expected to happen.

.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

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

docs/docs/examples/place.mdx

@@ -34,37 +34,82 @@ export const TooltipAnchor = ({ children, id, ...rest }) => {
   )
 }
 
-The `place` prop and the `data-tooltip-place` attribute accept the following values: `'top' | 'right' | 'bottom' | 'left'`.
+The `place` prop and the `data-tooltip-place` attribute accept the following values: `'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'`.
 
 ### Using `data-tooltip-place` attribute
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
+const PLACES = ['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end']
 
 <a id="my-tooltip-anchor">◕‿‿◕</a>
-<Tooltip anchorSelect="#my-tooltip-anchor" content="Hello world from the top!" place="top" />
-<Tooltip anchorSelect="#my-tooltip-anchor" content="Hello world from the right!" place="right" />
-<Tooltip anchorSelect="#my-tooltip-anchor" content="Hello world from the bottom!" place="bottom" />
-<Tooltip anchorSelect="#my-tooltip-anchor" content="Hello world from the left!" place="left" />
+{PLACES.map(place => (
+  <Tooltip
+    key={place}
+    anchorSelect="#my-tooltip-anchor"
+    content={`Hello world from the ${place}!`}
+    place={place}
+  />
+))}
 ```
 
-<TooltipAnchor id="my-tooltip-anchor">◕‿‿◕</TooltipAnchor>
-<Tooltip anchorSelect="#my-tooltip-anchor" content="Hello world from the top!" place="top" />
-<Tooltip anchorSelect="#my-tooltip-anchor" content="Hello world from the right!" place="right" />
-<Tooltip anchorSelect="#my-tooltip-anchor" content="Hello world from the bottom!" place="bottom" />
-<Tooltip anchorSelect="#my-tooltip-anchor" content="Hello world from the left!" place="left" />
+export const PlacementExampleAttributes = () => {
+  const PLACES1 = ['top', 'right', 'bottom', 'left'];
+  const PLACES2 = ['top-start', 'right-start', 'bottom-start', 'left-start'];
+  const PLACES3 = ['top-end', 'right-end', 'bottom-end', 'left-end'];
+
+  return (
+    <>
+      <div style={{display: 'flex', gap: '16px'}}>
+      <TooltipAnchor id="my-tooltip-anchor1">◕‿‿◕</TooltipAnchor>
+      <TooltipAnchor id="my-tooltip-anchor2">◕‿‿◕</TooltipAnchor>
+      <TooltipAnchor id="my-tooltip-anchor3">◕‿‿◕</TooltipAnchor>
+      </div>
+      <div>
+      {PLACES1.map(place => (
+        <Tooltip
+          key={place}
+          anchorSelect="#my-tooltip-anchor1"
+          content={`Hello world from the ${place}!`}
+          place={place}
+        />
+      ))}
+      {PLACES2.map(place => (
+        <Tooltip
+          key={place}
+          anchorSelect="#my-tooltip-anchor2"
+          content={`Hello world from the ${place}!`}
+          place={place}
+        />
+      ))}
+      {PLACES3.map(place => (
+        <Tooltip
+          key={place}
+          anchorSelect="#my-tooltip-anchor3"
+          content={`Hello world from the ${place}!`}
+          place={place}
+        />
+      ))}
+      </div>
+    </>
+  )
+}
+
+<PlacementExampleAttributes />
+
+
 
 ### Using `place` prop
 
 ```jsx
 import { Tooltip } from 'react-tooltip';
 
-const PLACES = ['top', 'right', 'bottom', 'left']
+const PLACES = ['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end']
 const [place, setPlace] = useState(0)
 
 <a 
   data-tooltip-id="my-tooltip"
-  onClick={() => setPlace(p => (p + 1) % 4)}
+  onClick={() => setPlace(p => (p + 1) % 12)}
 >
   ◕‿‿◕
 </a>
@@ -76,14 +121,14 @@ const [place, setPlace] = useState(0)
 ```
 
 export const PlacementExample = () => {
-  const PLACES = ['top', 'right', 'bottom', 'left']
+  const PLACES = ['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end'];
   const [place, setPlace] = useState(0)
 
   return (
     <>
       <TooltipAnchor
         data-tooltip-id="my-tooltip"
-        onClick={() => setPlace(p => (p + 1) % 4)}
+        onClick={() => setPlace(p => (p + 1) % 12)}
       >
         ◕‿‿◕
       </TooltipAnchor>

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

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,19 +102,27 @@ 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:
 
 <CodeBlock language="css">{TooltipStyles}</CodeBlock>
 
-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:
+
+<CodeBlock language="css">{TooltipCoreStyles}</CodeBlock>
+
+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 {
   color: #222;
   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.<br /><br /> 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.<br /><br /> 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
+```