Merge branch 'master' into tooltip-effect-float

Author: gabrieljablonski

README.md

@@ -51,7 +51,7 @@ or if you want to still use the name ReactTooltip as V4:
 import { Tooltip as ReactTooltip } from 'react-tooltip'
 ```
 
-2 . Add data-tooltip-content = "your placeholder" to your element
+2 . Add `data-tooltip-content="your placeholder"` to your element
 
 ```jsx
 <p id="my-element" data-tooltip-content="hello world">

docs/docs/getting-started.mdx

@@ -56,49 +56,62 @@ There are two ways to use ReactTooltip.
 
 ### ReactTooltip props
 
-1 . Require react-tooltip after installation
+1 . Import `react-tooltip` after installation
 
 ```js
-import ReactTooltip from 'react-tooltip'
+import { Tooltip } from 'react-tooltip'
 ```
 
-2 . Add data-content = "your placeholder" to your element
+2 . Create anchor element
 
 ```jsx
 <p id="my-anchor-element">Tooltip</p>
 ```
 
-3 . Include react-tooltip component
+3 . Create `<Tooltip />` element
 
 ```jsx
-<ReactTooltip anchorId="my-anchor-element" content="hello world" place="top" />
+<Tooltip anchorId="my-anchor-element" content="hello world" place="top" />
 ```
 
 ### Anchor data attributes
 
-1 . Require react-tooltip after installation
+1 . Import `react-tooltip` after installation
 
 ```js
-import ReactTooltip from 'react-tooltip'
+import { Tooltip } from 'react-tooltip'
 ```
 
-2 . Add data-content = "your placeholder" to your element
+2 . Add `data-tooltip-content="your placeholder"` to your element
 
 ```jsx
 <p id="my-anchor-element" data-tooltip-content="hello world" data-tooltip-place="top">
   Tooltip
 </p>
 ```
 
+3 . Create `<Tooltip />` element
+
+```jsx
+<Tooltip anchorId="my-anchor-element" />
+```
+
 ### Styling
 
-If you want a styled tooltip, don't forget to add the style file `import 'react-tooltip/dist/react-tooltip.css`
+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
+Basic styling can be done by overriding the following css variables.
 
-```jsx
-<ReactTooltip anchorId="my-anchor-element" />
+```css
+:root {
+  --rt-color-white: #fff;
+  --rt-color-dark: #222;
+  --rt-color-success: #8dc572;
+  --rt-color-error: #be6464;
+  --rt-color-warning: #f0ad4e;
+  --rt-color-info: #337ab7;
+  --rt-opacity: 0.9;
+}
 ```
 
-<TooltipAnchor id="props-basic">◕‿‿◕</TooltipAnchor>
-<Tooltip anchorId="props-basic" content="hello world!" />
+For advanced styling, check [the examples](./examples/styling.mdx).

docs/docs/upgrade-guide/basic-examples-v4-v5.mdx

@@ -43,7 +43,7 @@ import ReactTooltip from 'react-tooltip';
 <ReactTooltip id="tooltip" place="top" type="dark" />
 ```
 
-(v4) `data-tip` = `data-content` (v5)
+(v4) `data-tip` = `data-tooltip-content` (v5)
 
 - `V4` - CSS styles are built-in and injected by tooltip into the header (not a good practice but convenient), [issues in GitHub](https://github.com/ReactTooltip/react-tooltip/issues?q=is%3Aissue+header)
 - `V5` - CSS styles are optional and can be imported or not to the project
@@ -68,7 +68,7 @@ import 'react-tooltip/dist/react-tooltip.css'
 import { Tooltip } from 'react-tooltip';
 import 'react-tooltip/dist/react-tooltip.css';
 
-<a id="attributes-basic" data-content="hello world!"> ◕‿‿◕ </a>
+<a id="attributes-basic" data-tooltip-content="hello world!"> ◕‿‿◕ </a>
 
 <Tooltip anchorId="attributes-basic" />
 ```

src/components/Tooltip/styles.module.css

@@ -31,7 +31,7 @@
 
 .show {
   visibility: visible;
-  opacity: 0.9;
+  opacity: var(--rt-opacity);
 }
 
 /** Types variant **/

src/tokens.css

@@ -5,4 +5,5 @@
   --rt-color-error: #be6464;
   --rt-color-warning: #f0ad4e;
   --rt-color-info: #337ab7;
+  --rt-opacity: 0.9;
 }