Merge branch 'master' of github.com:ReactTooltip/react-tooltip

Author: gabrieljablonski

docs/docs/options.mdx

@@ -123,4 +123,5 @@ import { Tooltip } from 'react-tooltip';
 | `middlewares`           | `Middleware[]`                         | no       |                           | array of valid `floating-ui` middlewares                                                                                          | Allows for advanced customization. Check the [`floating-ui` docs](https://floating-ui.com/docs/middleware) for more information                                 |
 | `border`                | `CSSProperties['border']`              | no       |                           | a CSS border style                                                                                                                | Change the style of the tooltip border (including the arrow)                                                                                                    |
 | `opacity`               | `CSSProperties['opacity']`             | no       | `0.9`                     | a CSS opacity value                                                                                                               | Change the opacity of the tooltip                                                                                                                               |
+| `arrowColor`            | `CSSProperties['backgroundColor']`     | no       |                           | a CSS background color                                                                                                            | Change color of the tooltip arrow                                                                                                                               |
 | `disableStyleInjection` | <code>`boolean` &#124; `'core'`</code> | no       | `false`                   | `true` `false` `'core'`                                                                                                           | Whether to disable automatic style injection. Do not set dynamically. Check the [styling page](./examples/styling#disabling-reacttooltip-css) for more details  |

docs/docs/upgrade-guide/changelog-v4-v5.md

@@ -68,7 +68,7 @@ If you run into any problems with the tooltip not updating after changes are mad
 - [ ] `textColor` - use `className` and custom CSS
 - [ ] `backgroundColor` - use `className` and custom CSS
 - [ ] `borderColor` - use `border` prop
-- [ ] `arrowColor` - use `className` and custom CSS
+- [x] `arrowColor`
 - [ ] `arrowRadius` - use `className` and custom CSS
 - [ ] `tooltipRadius` - use `className` and custom CSS
 - [ ] `insecure`

src/components/Tooltip/Tooltip.tsx

@@ -47,6 +47,7 @@ const Tooltip = ({
   setActiveAnchor,
   border,
   opacity,
+  arrowColor,
 }: ITooltip) => {
   const tooltipRef = useRef<HTMLElement>(null)
   const tooltipArrowRef = useRef<HTMLElement>(null)
@@ -654,7 +655,12 @@ const Tooltip = ({
             [coreStyles['noArrow']]: noArrow,
           },
         )}
-        style={inlineArrowStyles}
+        style={{
+          ...inlineArrowStyles,
+          background: arrowColor
+            ? `linear-gradient(to right bottom, transparent 50%, ${arrowColor} 50%)`
+            : undefined,
+        }}
         ref={tooltipArrowRef}
       />
     </WrapperElement>

src/components/Tooltip/TooltipTypes.d.ts

@@ -91,4 +91,5 @@ export interface ITooltip {
   setActiveAnchor: (anchor: HTMLElement | null) => void
   border?: CSSProperties['border']
   opacity?: CSSProperties['opacity']
+  arrowColor?: CSSProperties['backgroundColor']
 }

src/components/Tooltip/styles.module.css

@@ -8,9 +8,24 @@
 .arrow {
   width: 8px;
   height: 8px;
+}
+
+[class*='react-tooltip__place-top'] > .arrow {
   transform: rotate(45deg);
 }
 
+[class*='react-tooltip__place-right'] > .arrow {
+  transform: rotate(135deg);
+}
+
+[class*='react-tooltip__place-bottom'] > .arrow {
+  transform: rotate(225deg);
+}
+
+[class*='react-tooltip__place-left'] > .arrow {
+  transform: rotate(315deg);
+}
+
 /** Types variant **/
 .dark {
   background: var(--rt-color-dark);

src/components/TooltipController/TooltipController.tsx

@@ -47,6 +47,7 @@ const TooltipController = ({
   disableStyleInjection = false,
   border,
   opacity,
+  arrowColor,
   setIsOpen,
   afterShow,
   afterHide,
@@ -334,6 +335,7 @@ const TooltipController = ({
     isOpen,
     border,
     opacity,
+    arrowColor,
     setIsOpen,
     afterShow,
     afterHide,

src/components/TooltipController/TooltipControllerTypes.d.ts

@@ -69,6 +69,7 @@ export interface ITooltipController {
    */
   border?: CSSProperties['border']
   opacity?: CSSProperties['opacity']
+  arrowColor?: CSSProperties['backgroundColor']
   setIsOpen?: (value: boolean) => void
   afterShow?: () => void
   afterHide?: () => void

src/utils/compute-positions.ts

@@ -44,14 +44,10 @@ export const computeTooltipPosition = async ({
           left: 'right',
         }[placement.split('-')[0]] ?? 'bottom'
 
-      const borderSide =
-        border &&
-        {
-          top: { borderBottom: border, borderRight: border },
-          right: { borderBottom: border, borderLeft: border },
-          bottom: { borderTop: border, borderLeft: border },
-          left: { borderTop: border, borderRight: border },
-        }[placement.split('-')[0]]
+      const borderSide = border && {
+        borderBottom: border,
+        borderRight: border,
+      }
 
       let borderWidth = 0
       if (border) {