ReactTooltip · danielbarion · Dec 10, 2022 · Dec 8, 2022 · Dec 8, 2022 · Dec 8, 2022
diff --git a/CONTRIBUTION.md b/CONTRIBUTION.md
@@ -0,0 +1,38 @@
+# Contribution
+
+## Running project locally
+
+### ReactTooltip (root)
+
+1. Run `npm install` || `yarn` to install dependencies
+2. You can test by: `yarn dev` to run dev mode, or you can run **docs** directly using root folder instead of NPM, for this, please check **docs section**.
+
+### Docs
+
+You still need step 1 from `ReactTooltip (root)` section.
+Docs are commited using npm packages, but with this steps, you can use local ReactTooltip package build.
+
+1. In **docs** folder, run `npm install` || `yarn` to install dependencies
+2. In **root** folder (parent of docs folder), run `yarn build` to generate a production build (you can use `yarn build --watch` to always generate a new build when a file changes)
+3. Change `package.json`:
+
+From this:
+```
+"react": "18.2.0",
+"react-dom": "18.2.0",
+"react-tooltip": "5.0.0"
+```
+
+To this:
+```
+"react": "link:../node_modules/react",
+"react-dom": "link:../node_modules/react-dom",
+"react-tooltip": "link:.."
+
+```
+
+4. Run `yarn start` and open `localhost:3000` to see docs running locally.
+
+OBS: do not commit this change or the docs will broken the deployment and will not be updated.
+
+
diff --git a/README.md b/README.md
@@ -104,6 +104,8 @@ import ReactDOMServer from 'react-dom/server';
 
 [danielbarion](https://github.com/danielbarion) Maintainer - Creator of React Tooltip >= V5.
 
+[gabrieljablonski](https://github.com/gabrieljablonski) Maintainer.
+
 [aronhelser](https://github.com/aronhelser) Passive maintainer - accepting PRs and doing minor testing, but not fixing issues or doing active development.
 
 [alexgurr](https://github.com/alexgurr) (inactive).

diff --git a/docs/docs/examples/_category_.json b/docs/docs/examples/_category_.json
@@ -2,6 +2,7 @@
   "label": "Examples",
   "position": 4,
   "link": {
-    "type": "generated-index"
+    "type": "generated-index",
+    "description": "Examples using props and some use cases with ReactTooltip component"
   }
 }
diff --git a/docs/docs/examples/styling.mdx b/docs/docs/examples/styling.mdx
@@ -6,8 +6,12 @@ sidebar_position: 1
 
 How to customize tooltip styles in ReactTooltip styles.
 
+Now tooltip arrow inherit his background color from tooltip (his parent).
+
 import { Tooltip } from 'react-tooltip'
 import 'react-tooltip/dist/react-tooltip.css'
+import CodeBlock from '@theme/CodeBlock'
+import TooltipStyles from '!!raw-loader!../../../src/components/Tooltip/styles.module.css'
 
 export const TooltipAnchor = ({ children, id, ...rest }) => {
   return (
@@ -33,31 +37,55 @@ export const TooltipAnchor = ({ children, id, ...rest }) => {
   )
 }
 
-### Basic explanation
+### Basic explanation - Inline Styling
+
+You can add styles into the tooltip as inline styling.
+
+```jsx
+import { Tooltip } from 'react-tooltip'
+import 'react-tooltip/dist/react-tooltip.css'
+
+<a id="custom-inline-styles" data-tooltip-content="hello world!">
+  ◕‿‿◕
+</a>
+<Tooltip
+  anchorId="custom-inline-styles"
+  style={{ backgroundColor: "rgb(0, 255, 30)", color: "#222" }}
+/>
+```
+
+<div
+  style={{ display: 'flex', columnGap: '16px', justifyContent: 'center' }}
+>
+  <TooltipAnchor id="custom-inline-styles" data-tooltip-content="hello world!">
+    ◕‿‿◕
+  </TooltipAnchor>
+  <Tooltip anchorId="custom-inline-styles" style={{ backgroundColor: "rgb(0, 255, 30)", color: "#222" }} />
+</div>
+
+
+### Basic explanation - Classes
 
 You don't need `!important` anymore, you just need to know at least a bit about CSS Specificity ([MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) | [W3c Docs](https://www.w3schools.com/css/css_specificity.asp)).
 Using CSS Specificity you can add a class with more specificity than the current used in tooltip and you can override or add new rules to the component style.
 
+
 ```jsx
 import { Tooltip } from 'react-tooltip'
 import 'react-tooltip/dist/react-tooltip.css'
 
 <style>
-.example-container .example {
+.example {
   color: #222;
   background-color: rgb(0, 247, 255);
 }
-
-.example-container .example .example-arrow {
-  background-color: rgb(0, 247, 255);
-}
 </style>
 
 <div className="example-container">
   <a id="custom-styles" data-tooltip-content="hello world!">
     ◕‿‿◕
   </a>
-  <Tooltip anchorId="custom-styles" className="example" classNameArrow="example-arrow" />
+  <Tooltip anchorId="custom-styles" className="example" />
 </div>
 ```
 
@@ -68,74 +96,14 @@ import 'react-tooltip/dist/react-tooltip.css'
   <TooltipAnchor id="custom-styles" data-tooltip-content="hello world!">
     ◕‿‿◕
   </TooltipAnchor>
-  <Tooltip anchorId="custom-styles" className="example" classNameArrow="example-arrow" />
+  <Tooltip anchorId="custom-styles" className="example" />
 </div>
 
 #### Explanation
 
 In this example, we are adding an extra level to the CSS classes, the following styles are the default one of Tooltip component when we write this docs:
 
-```css
-.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;
-}
-
-.arrow {
-  position: absolute;
-  background: var(--rt-color-dark);
-  width: 8px;
-  height: 8px;
-  transform: rotate(45deg);
-}
-
-/** Types variant **/
-.dark,
-.dark .arrow {
-  background: var(--rt-color-dark);
-  color: var(--rt-color-white);
-}
-
-.light,
-.light .arrow {
-  background-color: var(--rt-color-white);
-  color: var(--rt-color-dark);
-}
-
-.success,
-.success .arrow {
-  background-color: var(--rt-color-success);
-  color: var(--rt-color-white);
-}
-
-.warning,
-.warning .arrow {
-  background-color: var(--rt-color-warning);
-  color: var(--rt-color-white);
-}
-
-.error,
-.error .arrow {
-  background-color: var(--rt-color-error);
-  color: var(--rt-color-white);
-}
-
-.info,
-.info .arrow {
-  background-color: var(--rt-color-info);
-  color: var(--rt-color-white);
-}
-```
+<CodeBlock language="css">{TooltipStyles}</CodeBlock>
 
 So, if we only add new classes like the below, this will not work because this is the same level of specificity than the default dark variant as example, you can compare:
 
@@ -145,20 +113,9 @@ So, if we only add new classes like the below, this will not work because this i
   background-color: rgb(0, 247, 255);
 }
 
+/** add next line only if you want to have tooltip arrow with a different background color from tooltip **/
 .example .example-arrow {
-  background-color: rgb(0, 247, 255);
-}
-```
-
-```css
-.tooltip {
-  ...;
-}
-
-.dark,
-.dark .arrow {
-  background: var(--rt-color-dark);
-  color: var(--rt-color-white);
+  background-color: rgb(255, 0, 0);
 }
 ```
 
@@ -170,8 +127,9 @@ So, to make this work as expected, we need to add a new more level like this one
   background-color: rgb(0, 247, 255);
 }
 
+/** add next line only if you want to have tooltip arrow with a different background color from tooltip **/
 .some-class-or-rule .example .example-arrow {
-  background-color: rgb(0, 247, 255);
+  background-color: rgb(255, 0, 0);
 }
 ```
 
@@ -192,17 +150,13 @@ import 'react-tooltip/dist/react-tooltip.css'
   color: #222;
   background-color: rgb(255, 153, 0);
 }
-
-.example-container .example-orange .example-arrow {
-  background-color: rgb(255, 153, 0);
-}
 </style>
 
 <div className="example-container">
   <a id="custom-styles-orange" data-tooltip-content="hello world!">
     ◕‿‿◕
   </a>
-  <Tooltip anchorId="custom-styles-orange" className="example-orange" classNameArrow="example-arrow" />
+  <Tooltip anchorId="custom-styles-orange" className="example-orange" />
 </div>
 ```
 
@@ -216,7 +170,6 @@ import 'react-tooltip/dist/react-tooltip.css'
   <Tooltip
     anchorId="custom-styles-orange"
     className="example-orange"
-    classNameArrow="example-arrow"
   />
 </div>
 
@@ -231,17 +184,13 @@ import 'react-tooltip/dist/react-tooltip.css'
   color: #fff;
   background-color: rgb(255, 0, 255);
 }
-
-.example-container .example-pink .example-arrow {
-  background-color: rgb(255, 0, 255);
-}
 </style>
 
 <div className="example-container">
   <a id="custom-styles-pink" data-tooltip-content="hello world!">
     ◕‿‿◕
   </a>
-  <Tooltip anchorId="custom-styles-pink" className="example-pink" classNameArrow="example-arrow" />
+  <Tooltip anchorId="custom-styles-pink" className="example-pink" />
 </div>
 ```
 
@@ -252,7 +201,42 @@ import 'react-tooltip/dist/react-tooltip.css'
   <TooltipAnchor id="custom-styles-pink" data-tooltip-content="hello world!">
     ◕‿‿◕
   </TooltipAnchor>
-  <Tooltip anchorId="custom-styles-pink" className="example-pink" classNameArrow="example-arrow" />
+  <Tooltip anchorId="custom-styles-pink" className="example-pink" />
+</div>
+
+#### Tooltip Arrow with a different color from Tooltip
+
+```jsx
+import { Tooltip } from 'react-tooltip'
+import 'react-tooltip/dist/react-tooltip.css'
+
+<style>
+.example-container .example-diff-arrow {
+  color: #fff;
+  background-color: rgb(55, 55, 55);
+}
+
+.example-container .example-diff-arrow .example-arrow {
+  background-color: rgb(222, 34, 72);
+}
+</style>
+
+<div className="example-container">
+  <a id="custom-styles-diff" data-tooltip-content="hello world!">
+    ◕‿‿◕
+  </a>
+  <Tooltip anchorId="custom-styles-diff" className="example-diff-arrow" classNameArrow="example-arrow" />
+</div>
+```
+
+<div
+  className="example-container"
+  style={{ display: 'flex', columnGap: '16px', justifyContent: 'center' }}
+>
+  <TooltipAnchor id="custom-styles-diff" data-tooltip-content="hello world!">
+    ◕‿‿◕
+  </TooltipAnchor>
+  <Tooltip anchorId="custom-styles-diff" className="example-diff-arrow" classNameArrow="example-arrow" />
 </div>
 
 ### More examples - Radius

diff --git a/docs/docs/getting-started.mdx b/docs/docs/getting-started.mdx
@@ -85,11 +85,15 @@ import ReactTooltip from 'react-tooltip'
 2 . Add data-content = "your placeholder" to your element
 
 ```jsx
-<p id="my-anchor-element" data-content="hello world" data-place="top">
+<p id="my-anchor-element" data-tooltip-content="hello world" data-tooltip-place="top">
   Tooltip
 </p>
 ```
 
+### Styling
+
+If you want a styled tooltip, don't forget to add the style file `import 'react-tooltip/dist/react-tooltip.css`
+
 3 . Include react-tooltip component
 
 ```jsx

diff --git a/docs/docs/options.mdx b/docs/docs/options.mdx
@@ -66,6 +66,7 @@ import 'react-tooltip/dist/react-tooltip.css'
 | positionStrategy | 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                       |
 | delayShow        | number               | false    |                           | any `number`                                      | tooltip show will be delayed in miliseconds by the amount of value                                                                                              |
 | delayHide        | number               | false    |                           | any `number`                                      | tooltip hide will be delayed in miliseconds by the amount of value                                                                                              |
+| style            | CSSProperties        | false    |                           | any React inline style                            | add styles directly to the component by `style` attribute                                                                                                       |
 | getContent       | function             | false    |                           | (value: string) => string                         | a method available to parse, format or modify the given content of tooltip before show it                                                                       |
 | isOpen           | boolen               | false    | 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             | false    |                           |                                                   | the tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip                                       |

diff --git a/docs/docs/upgrade-guide/_category_.json b/docs/docs/upgrade-guide/_category_.json
@@ -2,6 +2,7 @@
   "label": "Upgrade Guide",
   "position": 2,
   "link": {
-    "type": "generated-index"
+    "type": "generated-index",
+    "description": "Upgrade docs related to migration from V4 to V5"
   }
 }
diff --git a/docs/docs/upgrade-guide/basic-examples-v4-v5.mdx b/docs/docs/upgrade-guide/basic-examples-v4-v5.mdx
@@ -4,6 +4,8 @@ sidebar_position: 4
 
 # Basic examples V4 -> V5
 
+Examples of use in V4 -> V5
+
 import { Tooltip } from 'react-tooltip'
 import 'react-tooltip/dist/react-tooltip.css'
 
@@ -78,7 +80,7 @@ import 'react-tooltip/dist/react-tooltip.css';
 
 ---
 
-# Colors
+## Colors
 
 ### V4 or less - type