docs: details on changing opacity/border

ReactTooltip · Nov 2, 2023 · 69b457d · 69b457d
1 parent 41e2ae5
commit 69b457d
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 0 deletions.
diff --git a/docs/docs/examples/styling.mdx b/docs/docs/examples/styling.mdx
@@ -212,6 +212,16 @@ import { Tooltip } from 'react-tooltip'
 
 #### Tooltip Arrow with a different color from Tooltip
 
+:::info
+
+This is for demonstration purposes only. Using `arrowColor` instead is recommended.
+
+```jsx
+<Tooltip arrowColor="red" />
+```
+
+:::
+
 ```jsx
 import { Tooltip } from 'react-tooltip'
 
@@ -244,6 +254,31 @@ import { Tooltip } from 'react-tooltip'
   <Tooltip id="my-tooltip-diff" className="example-diff-arrow" classNameArrow="example-arrow" />
 </div>
 
+### Changing the opacity
+
+Overriding the opacity through CSS breaks the tooltip. Use the `opacity` prop instead.
+
+```jsx
+import { Tooltip } from 'react-tooltip'
+
+<div className="example-container">
+  <a data-tooltip-id="my-tooltip-opacity" data-tooltip-content="Hello world!">
+    ◕‿‿◕
+  </a>
+  <Tooltip id="my-tooltip-opacity" opacity={0.3} />
+</div>
+```
+
+<div
+  className="example-container"
+  style={{ display: 'flex', columnGap: '16px', justifyContent: 'center' }}
+>
+  <TooltipAnchor data-tooltip-id="my-tooltip-opacity" data-tooltip-content="Hello world!">
+    ◕‿‿◕
+  </TooltipAnchor>
+  <Tooltip id="my-tooltip-opacity" opacity={0.3} />
+</div>
+
 ### Changing the border radius
 
 #### Removing radius
@@ -364,6 +399,33 @@ import { Tooltip } from 'react-tooltip'
   <Tooltip id="my-tooltip-padding" className="example-padding" />
 </div>
 
+### Changing the border
+
+If you're using the tooltip with the arrow, setting a border through CSS will not work for the arrow.
+
+We recommend using the `border` prop to avoid that.
+
+```jsx
+import { Tooltip } from 'react-tooltip'
+
+<div className="example-container">
+  <a data-tooltip-id="my-tooltip-border" data-tooltip-content="Hello world!">
+    ◕‿‿◕
+  </a>
+  <Tooltip id="my-tooltip-border" border="1px solid red" />
+</div>
+```
+
+<div
+  className="example-container"
+  style={{ display: 'flex', columnGap: '16px', justifyContent: 'center' }}
+>
+  <TooltipAnchor data-tooltip-id="my-tooltip-border" data-tooltip-content="Hello world!">
+    ◕‿‿◕
+  </TooltipAnchor>
+  <Tooltip id="my-tooltip-border" border="1px solid red" />
+</div>
+
 ---
 
 :::info

diff --git a/docs/docs/troubleshooting.mdx b/docs/docs/troubleshooting.mdx
@@ -64,6 +64,26 @@ If you've imported the default styling and the tooltip is still not showing up w
 
 If `data-tooltip-content` and `data-tooltip-html` are both unset (or they have empty values) on the anchor element, and also the `content`, `render`, and `children` props on the tooltip are unset (or have empty values), the tooltip is not shown by default.
 
+## The tooltip doesn't close
+
+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).
+
+```jsx
+<Tooltip 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.
+
+Instead, use [the `border` prop](./examples/styling#changing-the-border).
+
+```jsx
+<Tooltip border="1px solid red" />
+```
+
 ## Bad performance
 
 If you're experiencing any kind of unexpected behavior or bad performance on your application when using ReactTooltip, here are a few things you can try.