Merge pull request #866 from ReactTooltip/tooltip-opacity-var

feat: add opacity css variable

Author: danielbarion

docs/docs/getting-started.mdx

@@ -98,4 +98,20 @@ import { Tooltip } from 'react-tooltip'
 
 ### 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`.
+
+Basic styling can be done by overriding the following css variables.
+
+```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;
+}
+```
+
+For advanced styling, check [the examples](./examples/styling.mdx).

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;
 }