From e7ff1780ca8bbc0ffa17d8bac8021344234f238f Mon Sep 17 00:00:00 2001
From: MT Lewis <mtlewis@users.noreply.github.com>
Date: Fri, 18 Jul 2025 11:53:30 +0100
Subject: [PATCH] ui: update styling of Tooltip

Signed-off-by: MT Lewis <mtlewis@users.noreply.github.com>
---
 .changeset/funny-dancers-start.md             |  5 ++++
 packages/ui/report.api.md                     |  2 ++
 .../src/components/Tooltip/Tooltip.styles.css | 24 ++++++++++++++++++-
 .../ui/src/components/Tooltip/Tooltip.tsx     | 15 ++++++++++--
 packages/ui/src/utils/componentDefinitions.ts |  2 ++
 5 files changed, 45 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/funny-dancers-start.md

diff --git a/.changeset/funny-dancers-start.md b/.changeset/funny-dancers-start.md
new file mode 100644
index 0000000000..267585f8b2
--- /dev/null
+++ b/.changeset/funny-dancers-start.md
@@ -0,0 +1,5 @@
+---
+'@backstage/ui': patch
+---
+
+Update styling of Tooltip element
diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md
index 7ef69560d1..c430633bf0 100644
--- a/packages/ui/report.api.md
+++ b/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';
     };
   };
 };
diff --git a/packages/ui/src/components/Tooltip/Tooltip.styles.css b/packages/ui/src/components/Tooltip/Tooltip.styles.css
index b86a93b038..29f550d5ee 100644
--- a/packages/ui/src/components/Tooltip/Tooltip.styles.css
+++ b/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);
diff --git a/packages/ui/src/components/Tooltip/Tooltip.tsx b/packages/ui/src/components/Tooltip/Tooltip.tsx
index f22e068cab..9266c7dfd1 100644
--- a/packages/ui/src/components/Tooltip/Tooltip.tsx
+++ b/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}
diff --git a/packages/ui/src/utils/componentDefinitions.ts b/packages/ui/src/utils/componentDefinitions.ts
index 86aacb7d58..b00710d421 100644
--- a/packages/ui/src/utils/componentDefinitions.ts
+++ b/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>;