fix: arrow border behavior and backface

Author: danielbarion

src/components/Tooltip/Tooltip.tsx

@@ -9,8 +9,6 @@ import {
   computeTooltipPosition,
   cssTimeToMs,
   clearTimeoutRef,
-  getBorderWidth,
-  getBorderColor,
 } from 'utils'
 import type { IComputedPosition } from 'utils'
 import { useTooltip } from 'components/TooltipProvider'
@@ -98,10 +96,6 @@ const Tooltip = ({
   const hoveringTooltip = useRef(false)
   const [anchorsBySelect, setAnchorsBySelect] = useState<HTMLElement[]>([])
   const mounted = useRef(false)
-  const arrowBorderWidth = getBorderWidth(border)
-  const arrowBorderColor = getBorderColor(border)
-  const arrowBackground =
-    border && arrowBorderColor ? arrowBorderColor : (arrowColor ?? 'var(--rt-tooltip-background)')
 
   /**
    * @todo Update when deprecated stuff gets removed.
@@ -932,7 +926,15 @@ const Tooltip = ({
       }}
       ref={tooltipRef}
     >
-      {actualContent}
+      <WrapperElement
+        className={classNames(
+          'react-tooltip-content-wrapper',
+          coreStyles['content'],
+          styles['content'],
+        )}
+      >
+        {actualContent}
+      </WrapperElement>
       <WrapperElement
         className={classNames(
           'react-tooltip-arrow',
@@ -943,15 +945,13 @@ const Tooltip = ({
         )}
         style={{
           ...computedPosition.tooltipArrowStyles,
+          background: arrowColor
+            ? `linear-gradient(to right bottom, transparent 50%, ${arrowColor} 50%)`
+            : undefined,
           '--rt-arrow-size': `${arrowSize}px`,
-          '--rt-arrow-background': arrowBackground,
-          '--rt-arrow-border-width': arrowBorderColor ? arrowBorderWidth : '0px',
-          '--rt-arrow-border-color': arrowBorderColor,
         }}
         ref={tooltipArrowRef}
-      >
-        <WrapperElement className={coreStyles['arrowInner']} />
-      </WrapperElement>
+      />
     </WrapperElement>
   ) : null
 }

src/components/Tooltip/core-styles.module.css

@@ -13,16 +13,15 @@
 
 .arrow {
   position: absolute;
+  background: inherit;
   z-index: -1;
-  clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
-  background: var(--rt-arrow-border-color, var(--rt-arrow-background));
-  overflow: hidden;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
 }
 
-.arrowInner {
-  position: absolute;
-  inset: var(--rt-arrow-border-width, 0px);
-  background: var(--rt-arrow-background);
+.content {
+  position: relative;
+  z-index: 1;
 }
 
 .noArrow {

src/components/Tooltip/styles.module.css

@@ -1,10 +1,15 @@
 .tooltip {
-  padding: 8px 16px;
   border-radius: 3px;
   font-size: 90%;
   width: max-content;
 }
 
+.content {
+  background: inherit;
+  border-radius: inherit;
+  padding: 8px 16px;
+}
+
 .arrow {
   width: var(--rt-arrow-size);
   height: var(--rt-arrow-size);
@@ -28,37 +33,31 @@
 
 /** Types variant **/
 .dark {
-  --rt-tooltip-background: var(--rt-color-dark);
-  background: var(--rt-tooltip-background);
+  background: var(--rt-color-dark);
   color: var(--rt-color-white);
 }
 
 .light {
-  --rt-tooltip-background: var(--rt-color-white);
-  background-color: var(--rt-tooltip-background);
+  background-color: var(--rt-color-white);
   color: var(--rt-color-dark);
 }
 
 .success {
-  --rt-tooltip-background: var(--rt-color-success);
-  background-color: var(--rt-tooltip-background);
+  background-color: var(--rt-color-success);
   color: var(--rt-color-white);
 }
 
 .warning {
-  --rt-tooltip-background: var(--rt-color-warning);
-  background-color: var(--rt-tooltip-background);
+  background-color: var(--rt-color-warning);
   color: var(--rt-color-white);
 }
 
 .error {
-  --rt-tooltip-background: var(--rt-color-error);
-  background-color: var(--rt-tooltip-background);
+  background-color: var(--rt-color-error);
   color: var(--rt-color-white);
 }
 
 .info {
-  --rt-tooltip-background: var(--rt-color-info);
-  background-color: var(--rt-tooltip-background);
+  background-color: var(--rt-color-info);
   color: var(--rt-color-white);
 }

src/components/TooltipController/TooltipController.tsx

@@ -89,16 +89,13 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
     const { anchorRefs, activeAnchor: providerActiveAnchor } = useTooltip(id)
 
     const getDataAttributesFromAnchorElement = (elementReference: HTMLElement) => {
-      const dataAttributes = elementReference?.getAttributeNames().reduce(
-        (acc, name) => {
-          if (name.startsWith('data-tooltip-')) {
-            const parsedAttribute = name.replace(/^data-tooltip-/, '') as DataAttribute
-            acc[parsedAttribute] = elementReference?.getAttribute(name) ?? null
-          }
-          return acc
-        },
-        {} as Record<DataAttribute, string | null>,
-      )
+      const dataAttributes = elementReference?.getAttributeNames().reduce((acc, name) => {
+        if (name.startsWith('data-tooltip-')) {
+          const parsedAttribute = name.replace(/^data-tooltip-/, '') as DataAttribute
+          acc[parsedAttribute] = elementReference?.getAttribute(name) ?? null
+        }
+        return acc
+      }, {} as Record<DataAttribute, string | null>)
 
       return dataAttributes
     }

src/utils/border-style.ts

@@ -53,6 +53,11 @@ const computeTooltipPosition = async ({
         }[placement.split('-')[0]] ?? 'bottom'
       /* c8 ignore end */
 
+      const borderSide = border && {
+        borderBottom: border,
+        borderRight: border,
+      }
+
       let borderWidth = 0
       if (border) {
         const match = `${border}`.match(/(\d+)px/)
@@ -73,10 +78,8 @@ const computeTooltipPosition = async ({
         top: arrowY != null ? `${arrowY}px` : '',
         right: '',
         bottom: '',
-        // Keep the arrow tucked under the tooltip body. When the tooltip has a
-        // border, offset by that width, but do not draw a separate arrow border:
-        // the rotated/clipped element cannot render that seam cleanly.
-        [staticSide]: `-${arrowSize * 0.5 + borderWidth}px`,
+        ...borderSide,
+        [staticSide]: `-${arrowSize / 2 + borderWidth - 1}px`,
       }
       /* c8 ignore end */
 

src/utils/compute-tooltip-position.ts

@@ -7,7 +7,6 @@ import deepEqual from './deep-equal'
 import getScrollParent from './get-scroll-parent'
 import useIsomorphicLayoutEffect from './use-isomorphic-layout-effect'
 import clearTimeoutRef from './clear-timeout-ref'
-import { getBorderWidth, getBorderColor } from './border-style'
 
 export type { IComputedPosition }
 export {
@@ -19,6 +18,4 @@ export {
   getScrollParent,
   useIsomorphicLayoutEffect,
   clearTimeoutRef,
-  getBorderWidth,
-  getBorderColor,
 }