ui: update styling of Tooltip

Signed-off-by: MT Lewis <mtlewis@users.noreply.github.com>

.changeset/funny-dancers-start.md

@@ -0,0 +1,5 @@
+---
+'@backstage/ui': patch
+---
+
+Update styling of Tooltip element

packages/ui/report.api.md

@@ -591,6 +591,8 @@ export const componentDefinitions: {
     readonly classNames: {
       readonly tooltip: 'bui-Tooltip';
       readonly arrow: 'bui-TooltipArrow';
+      readonly arrowFill: 'bui-TooltipArrowFill';
+      readonly arrowStroke: 'bui-TooltipArrowStroke';
     };
   };
 };

packages/ui/src/components/Tooltip/Tooltip.styles.css

@@ -18,9 +18,10 @@
   box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
   border-radius: 4px;
   background: var(--bui-bg-surface-2);
+  border: var(--bui-border) solid 1px;
   forced-color-adjust: none;
   outline: none;
-  padding: var(--bui-space-2) var(--bui-space-3);
+  padding: var(--bui-space-3) var(--bui-space-4);
   max-width: 240px;
   /* fixes FF gap */
   transform: translate3d(0, 0, 0);
@@ -35,6 +36,27 @@
     opacity: 0;
   }
 
+  & .bui-TooltipArrow {
+    svg {
+      /* The tooltip is rendered overlaying the main
+         tooltip element by 1px. This causes the borders
+         to overlap, which causes minor visual artifacts
+         with transparent border colors. To mitigate this,
+         we split the stroke and fill across separate
+         elements in order to guarantee that the stroke is
+         always overlaying a consistent color. */
+      path.bui-TooltipArrowFill {
+        stroke: var(--bui-bg-surface-2);
+        fill: var(--bui-bg-surface-2);
+      }
+
+      path.bui-TooltipArrowStroke {
+        stroke: var(--bui-border);
+        fill: transparent;
+      }
+    }
+  }
+
   &[data-placement='top'] {
     margin-bottom: var(--bui-space-2);
     --origin: translateY(4px);

packages/ui/src/components/Tooltip/Tooltip.tsx

@@ -25,6 +25,9 @@ import clsx from 'clsx';
 import { TooltipProps } from './types';
 import { useStyles } from '../../hooks/useStyles';
 
+const tooltipArrowPathDefinition =
+  'M28-1 15.509 14.281a1.943 1.943 0 0 1-3.018 0L0-1';
+
 /** @public */
 export const TooltipTrigger = (props: TooltipTriggerComponentProps) => {
   const { delay = 600 } = props;
@@ -40,12 +43,20 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
     return (
       <AriaTooltip
         className={clsx(classNames.tooltip, className)}
+        offset={16}
         {...rest}
         ref={ref}
       >
         <OverlayArrow className={classNames.arrow}>
-          <svg width={8} height={8} viewBox="0 0 8 8">
-            <path d="M0 0 L4 4 L8 0" />
+          <svg width={28} height={28} viewBox="0 0 28 28">
+            <path
+              className={classNames.arrowFill}
+              d={tooltipArrowPathDefinition}
+            />
+            <path
+              className={classNames.arrowStroke}
+              d={tooltipArrowPathDefinition}
+            />
           </svg>
         </OverlayArrow>
         {children}

packages/ui/src/utils/componentDefinitions.ts

@@ -286,6 +286,8 @@ export const componentDefinitions = {
     classNames: {
       tooltip: 'bui-Tooltip',
       arrow: 'bui-TooltipArrow',
+      arrowFill: 'bui-TooltipArrowFill',
+      arrowStroke: 'bui-TooltipArrowStroke',
     },
   },
 } as const satisfies Record<string, ComponentDefinition>;