docs: mention the opacity CSS variable

docs/docs/examples/styling.mdx

@@ -256,7 +256,7 @@ import { Tooltip } from 'react-tooltip'
 
 ### Changing the opacity
 
-Overriding the opacity through CSS breaks the tooltip. Use the `opacity` prop instead.
+Setting the opacity through CSS directly on the tooltip element breaks functionality. Use the `opacity` prop, or override the `--rt-opacity` CSS variable instead.
 
 ```jsx
 import { Tooltip } from 'react-tooltip'
@@ -269,6 +269,13 @@ import { Tooltip } from 'react-tooltip'
 </div>
 ```
 
+```css
+/* To be used instead of the `opacity` prop, not required otherwise */
+:root {
+  --rt-opacity: 0.3;
+}
+```
+
 <div
   className="example-container"
   style={{ display: 'flex', columnGap: '16px', justifyContent: 'center' }}

docs/docs/troubleshooting.mdx

@@ -68,12 +68,20 @@ If `data-tooltip-content` and `data-tooltip-html` are both unset (or they have e
 
 This usually happens when you try to set the tooltip opacity via CSS. Due to the opacity being used internally to control the tooltip state, overriding it breaks functionality.
 
-Instead, use [the `opacity` prop](./examples/styling#changing-the-opacity).
+Instead, use the `opacity` prop, or override the `--rt-opacity` CSS variable. See [the examples](./examples/styling#changing-the-opacity) for more details.
 
 ```jsx
 <Tooltip opacity={1} />
 ```
 
+or
+
+```css
+:root {
+  --rt-opacity: 1;
+}
+```
+
 ## The border doesn't show for the arrow
 
 Simply setting the border for the tooltip through CSS will not work for the arrow.