From 38cae381ee8e11fdaaa746568eee9a659591811d Mon Sep 17 00:00:00 2001
From: Vio <vio@beanon.com>
Date: Sun, 27 Feb 2022 19:17:52 +0100
Subject: [PATCH] FIXUP: tooltip

---
 .../horizontal-bar-chart.stories.storyshot    |  75 +++++++++++++
 .../__snapshots__/tooltip.stories.storyshot   | 104 ++++++++++--------
 packages/ui/src/ui/tooltip/tooltip.jsx        |  11 +-
 3 files changed, 141 insertions(+), 49 deletions(-)

diff --git a/packages/ui/src/ui/horizontal-bar-chart/__snapshots__/horizontal-bar-chart.stories.storyshot b/packages/ui/src/ui/horizontal-bar-chart/__snapshots__/horizontal-bar-chart.stories.storyshot
index d9bceda15f..11671e1042 100644
--- a/packages/ui/src/ui/horizontal-bar-chart/__snapshots__/horizontal-bar-chart.stories.storyshot
+++ b/packages/ui/src/ui/horizontal-bar-chart/__snapshots__/horizontal-bar-chart.stories.storyshot
@@ -107,12 +107,14 @@ exports[`Storyshots UI/HorizontalBarChart default 1`] = `
                     <ForwardRef(Role)
                       as="span"
                       className="root itemContent"
+                      id="id-test"
                       state={
                         Object {
                           "anchorRect": null,
                           "anchorRef": Object {
                             "current": <span
                               class="root itemContent"
+                              id="id-test"
                               tabindex="0"
                             >
                               <span
@@ -160,6 +162,7 @@ exports[`Storyshots UI/HorizontalBarChart default 1`] = `
                     >
                       <span
                         className="root itemContent"
+                        id="id-test"
                         onBlur={[Function]}
                         onFocus={[Function]}
                         onMouseEnter={[Function]}
@@ -203,12 +206,14 @@ exports[`Storyshots UI/HorizontalBarChart default 1`] = `
                     <ForwardRef(Role)
                       as="span"
                       className="root itemContent"
+                      id="id-test"
                       state={
                         Object {
                           "anchorRect": null,
                           "anchorRef": Object {
                             "current": <span
                               class="root itemContent"
+                              id="id-test"
                               tabindex="0"
                             >
                               <span
@@ -256,6 +261,7 @@ exports[`Storyshots UI/HorizontalBarChart default 1`] = `
                     >
                       <span
                         className="root itemContent"
+                        id="id-test"
                         onBlur={[Function]}
                         onFocus={[Function]}
                         onMouseEnter={[Function]}
@@ -299,12 +305,14 @@ exports[`Storyshots UI/HorizontalBarChart default 1`] = `
                     <ForwardRef(Role)
                       as="span"
                       className="root itemContent"
+                      id="id-test"
                       state={
                         Object {
                           "anchorRect": null,
                           "anchorRef": Object {
                             "current": <span
                               class="root itemContent"
+                              id="id-test"
                               tabindex="0"
                             >
                               <span
@@ -352,6 +360,7 @@ exports[`Storyshots UI/HorizontalBarChart default 1`] = `
                     >
                       <span
                         className="root itemContent"
+                        id="id-test"
                         onBlur={[Function]}
                         onFocus={[Function]}
                         onMouseEnter={[Function]}
@@ -395,12 +404,14 @@ exports[`Storyshots UI/HorizontalBarChart default 1`] = `
                     <ForwardRef(Role)
                       as="span"
                       className="root itemContent"
+                      id="id-test"
                       state={
                         Object {
                           "anchorRect": null,
                           "anchorRef": Object {
                             "current": <span
                               class="root itemContent"
+                              id="id-test"
                               tabindex="0"
                             >
                               <span
@@ -448,6 +459,7 @@ exports[`Storyshots UI/HorizontalBarChart default 1`] = `
                     >
                       <span
                         className="root itemContent"
+                        id="id-test"
                         onBlur={[Function]}
                         onFocus={[Function]}
                         onMouseEnter={[Function]}
@@ -491,12 +503,14 @@ exports[`Storyshots UI/HorizontalBarChart default 1`] = `
                     <ForwardRef(Role)
                       as="span"
                       className="root itemContent"
+                      id="id-test"
                       state={
                         Object {
                           "anchorRect": null,
                           "anchorRef": Object {
                             "current": <span
                               class="root itemContent"
+                              id="id-test"
                               tabindex="0"
                             >
                               <span
@@ -544,6 +558,7 @@ exports[`Storyshots UI/HorizontalBarChart default 1`] = `
                     >
                       <span
                         className="root itemContent"
+                        id="id-test"
                         onBlur={[Function]}
                         onFocus={[Function]}
                         onMouseEnter={[Function]}
@@ -894,12 +909,14 @@ exports[`Storyshots UI/HorizontalBarChart empty values 1`] = `
                     <ForwardRef(Role)
                       as="span"
                       className="root itemContent"
+                      id="id-test"
                       state={
                         Object {
                           "anchorRect": null,
                           "anchorRef": Object {
                             "current": <span
                               class="root itemContent"
+                              id="id-test"
                               tabindex="0"
                             >
                               <span
@@ -947,6 +964,7 @@ exports[`Storyshots UI/HorizontalBarChart empty values 1`] = `
                     >
                       <span
                         className="root itemContent"
+                        id="id-test"
                         onBlur={[Function]}
                         onFocus={[Function]}
                         onMouseEnter={[Function]}
@@ -990,12 +1008,14 @@ exports[`Storyshots UI/HorizontalBarChart empty values 1`] = `
                     <ForwardRef(Role)
                       as="span"
                       className="root itemContent"
+                      id="id-test"
                       state={
                         Object {
                           "anchorRect": null,
                           "anchorRef": Object {
                             "current": <span
                               class="root itemContent"
+                              id="id-test"
                               tabindex="0"
                             >
                               <span
@@ -1043,6 +1063,7 @@ exports[`Storyshots UI/HorizontalBarChart empty values 1`] = `
                     >
                       <span
                         className="root itemContent"
+                        id="id-test"
                         onBlur={[Function]}
                         onFocus={[Function]}
                         onMouseEnter={[Function]}
@@ -1086,12 +1107,14 @@ exports[`Storyshots UI/HorizontalBarChart empty values 1`] = `
                     <ForwardRef(Role)
                       as="span"
                       className="root itemContent"
+                      id="id-test"
                       state={
                         Object {
                           "anchorRect": null,
                           "anchorRef": Object {
                             "current": <span
                               class="root itemContent"
+                              id="id-test"
                               tabindex="0"
                             >
                               <span
@@ -1139,6 +1162,7 @@ exports[`Storyshots UI/HorizontalBarChart empty values 1`] = `
                     >
                       <span
                         className="root itemContent"
+                        id="id-test"
                         onBlur={[Function]}
                         onFocus={[Function]}
                         onMouseEnter={[Function]}
@@ -1182,12 +1206,14 @@ exports[`Storyshots UI/HorizontalBarChart empty values 1`] = `
                     <ForwardRef(Role)
                       as="span"
                       className="root itemContent"
+                      id="id-test"
                       state={
                         Object {
                           "anchorRect": null,
                           "anchorRef": Object {
                             "current": <span
                               class="root itemContent"
+                              id="id-test"
                               tabindex="0"
                             >
                               <span
@@ -1235,6 +1261,7 @@ exports[`Storyshots UI/HorizontalBarChart empty values 1`] = `
                     >
                       <span
                         className="root itemContent"
+                        id="id-test"
                         onBlur={[Function]}
                         onFocus={[Function]}
                         onMouseEnter={[Function]}
@@ -1278,12 +1305,14 @@ exports[`Storyshots UI/HorizontalBarChart empty values 1`] = `
                     <ForwardRef(Role)
                       as="span"
                       className="root itemContent"
+                      id="id-test"
                       state={
                         Object {
                           "anchorRect": null,
                           "anchorRef": Object {
                             "current": <span
                               class="root itemContent"
+                              id="id-test"
                               tabindex="0"
                             >
                               <span
@@ -1331,6 +1360,7 @@ exports[`Storyshots UI/HorizontalBarChart empty values 1`] = `
                     >
                       <span
                         className="root itemContent"
+                        id="id-test"
                         onBlur={[Function]}
                         onFocus={[Function]}
                         onMouseEnter={[Function]}
@@ -1696,12 +1726,14 @@ exports[`Storyshots UI/HorizontalBarChart with custom colors 1`] = `
                     <ForwardRef(Role)
                       as="span"
                       className="root itemContent"
+                      id="id-test"
                       state={
                         Object {
                           "anchorRect": null,
                           "anchorRef": Object {
                             "current": <span
                               class="root itemContent"
+                              id="id-test"
                               tabindex="0"
                             >
                               <span
@@ -1749,6 +1781,7 @@ exports[`Storyshots UI/HorizontalBarChart with custom colors 1`] = `
                     >
                       <span
                         className="root itemContent"
+                        id="id-test"
                         onBlur={[Function]}
                         onFocus={[Function]}
                         onMouseEnter={[Function]}
@@ -1792,12 +1825,14 @@ exports[`Storyshots UI/HorizontalBarChart with custom colors 1`] = `
                     <ForwardRef(Role)
                       as="span"
                       className="root itemContent"
+                      id="id-test"
                       state={
                         Object {
                           "anchorRect": null,
                           "anchorRef": Object {
                             "current": <span
                               class="root itemContent"
+                              id="id-test"
                               tabindex="0"
                             >
                               <span
@@ -1845,6 +1880,7 @@ exports[`Storyshots UI/HorizontalBarChart with custom colors 1`] = `
                     >
                       <span
                         className="root itemContent"
+                        id="id-test"
                         onBlur={[Function]}
                         onFocus={[Function]}
                         onMouseEnter={[Function]}
@@ -1888,12 +1924,14 @@ exports[`Storyshots UI/HorizontalBarChart with custom colors 1`] = `
                     <ForwardRef(Role)
                       as="span"
                       className="root itemContent"
+                      id="id-test"
                       state={
                         Object {
                           "anchorRect": null,
                           "anchorRef": Object {
                             "current": <span
                               class="root itemContent"
+                              id="id-test"
                               tabindex="0"
                             >
                               <span
@@ -1941,6 +1979,7 @@ exports[`Storyshots UI/HorizontalBarChart with custom colors 1`] = `
                     >
                       <span
                         className="root itemContent"
+                        id="id-test"
                         onBlur={[Function]}
                         onFocus={[Function]}
                         onMouseEnter={[Function]}
@@ -1984,12 +2023,14 @@ exports[`Storyshots UI/HorizontalBarChart with custom colors 1`] = `
                     <ForwardRef(Role)
                       as="span"
                       className="root itemContent"
+                      id="id-test"
                       state={
                         Object {
                           "anchorRect": null,
                           "anchorRef": Object {
                             "current": <span
                               class="root itemContent"
+                              id="id-test"
                               tabindex="0"
                             >
                               <span
@@ -2037,6 +2078,7 @@ exports[`Storyshots UI/HorizontalBarChart with custom colors 1`] = `
                     >
                       <span
                         className="root itemContent"
+                        id="id-test"
                         onBlur={[Function]}
                         onFocus={[Function]}
                         onMouseEnter={[Function]}
@@ -2080,12 +2122,14 @@ exports[`Storyshots UI/HorizontalBarChart with custom colors 1`] = `
                     <ForwardRef(Role)
                       as="span"
                       className="root itemContent"
+                      id="id-test"
                       state={
                         Object {
                           "anchorRect": null,
                           "anchorRef": Object {
                             "current": <span
                               class="root itemContent"
+                              id="id-test"
                               tabindex="0"
                             >
                               <span
@@ -2133,6 +2177,7 @@ exports[`Storyshots UI/HorizontalBarChart with custom colors 1`] = `
                     >
                       <span
                         className="root itemContent"
+                        id="id-test"
                         onBlur={[Function]}
                         onFocus={[Function]}
                         onMouseEnter={[Function]}
@@ -2517,12 +2562,14 @@ exports[`Storyshots UI/HorizontalBarChart with custom label 1`] = `
                     <ForwardRef(Role)
                       as="span"
                       className="root itemContent"
+                      id="id-test"
                       state={
                         Object {
                           "anchorRect": null,
                           "anchorRef": Object {
                             "current": <span
                               class="root itemContent"
+                              id="id-test"
                               tabindex="0"
                             >
                               <span
@@ -2572,6 +2619,7 @@ exports[`Storyshots UI/HorizontalBarChart with custom label 1`] = `
                     >
                       <span
                         className="root itemContent"
+                        id="id-test"
                         onBlur={[Function]}
                         onFocus={[Function]}
                         onMouseEnter={[Function]}
@@ -2621,12 +2669,14 @@ exports[`Storyshots UI/HorizontalBarChart with custom label 1`] = `
                     <ForwardRef(Role)
                       as="span"
                       className="root itemContent"
+                      id="id-test"
                       state={
                         Object {
                           "anchorRect": null,
                           "anchorRef": Object {
                             "current": <span
                               class="root itemContent"
+                              id="id-test"
                               tabindex="0"
                             >
                               <span
@@ -2676,6 +2726,7 @@ exports[`Storyshots UI/HorizontalBarChart with custom label 1`] = `
                     >
                       <span
                         className="root itemContent"
+                        id="id-test"
                         onBlur={[Function]}
                         onFocus={[Function]}
                         onMouseEnter={[Function]}
@@ -2725,12 +2776,14 @@ exports[`Storyshots UI/HorizontalBarChart with custom label 1`] = `
                     <ForwardRef(Role)
                       as="span"
                       className="root itemContent"
+                      id="id-test"
                       state={
                         Object {
                           "anchorRect": null,
                           "anchorRef": Object {
                             "current": <span
                               class="root itemContent"
+                              id="id-test"
                               tabindex="0"
                             >
                               <span
@@ -2780,6 +2833,7 @@ exports[`Storyshots UI/HorizontalBarChart with custom label 1`] = `
                     >
                       <span
                         className="root itemContent"
+                        id="id-test"
                         onBlur={[Function]}
                         onFocus={[Function]}
                         onMouseEnter={[Function]}
@@ -2829,12 +2883,14 @@ exports[`Storyshots UI/HorizontalBarChart with custom label 1`] = `
                     <ForwardRef(Role)
                       as="span"
                       className="root itemContent"
+                      id="id-test"
                       state={
                         Object {
                           "anchorRect": null,
                           "anchorRef": Object {
                             "current": <span
                               class="root itemContent"
+                              id="id-test"
                               tabindex="0"
                             >
                               <span
@@ -2884,6 +2940,7 @@ exports[`Storyshots UI/HorizontalBarChart with custom label 1`] = `
                     >
                       <span
                         className="root itemContent"
+                        id="id-test"
                         onBlur={[Function]}
                         onFocus={[Function]}
                         onMouseEnter={[Function]}
@@ -2933,12 +2990,14 @@ exports[`Storyshots UI/HorizontalBarChart with custom label 1`] = `
                     <ForwardRef(Role)
                       as="span"
                       className="root itemContent"
+                      id="id-test"
                       state={
                         Object {
                           "anchorRect": null,
                           "anchorRef": Object {
                             "current": <span
                               class="root itemContent"
+                              id="id-test"
                               tabindex="0"
                             >
                               <span
@@ -2988,6 +3047,7 @@ exports[`Storyshots UI/HorizontalBarChart with custom label 1`] = `
                     >
                       <span
                         className="root itemContent"
+                        id="id-test"
                         onBlur={[Function]}
                         onFocus={[Function]}
                         onMouseEnter={[Function]}
@@ -3340,12 +3400,14 @@ exports[`Storyshots UI/HorizontalBarChart with maxValue 1`] = `
                     <ForwardRef(Role)
                       as="span"
                       className="root itemContent"
+                      id="id-test"
                       state={
                         Object {
                           "anchorRect": null,
                           "anchorRef": Object {
                             "current": <span
                               class="root itemContent"
+                              id="id-test"
                               tabindex="0"
                             >
                               <span
@@ -3393,6 +3455,7 @@ exports[`Storyshots UI/HorizontalBarChart with maxValue 1`] = `
                     >
                       <span
                         className="root itemContent"
+                        id="id-test"
                         onBlur={[Function]}
                         onFocus={[Function]}
                         onMouseEnter={[Function]}
@@ -3436,12 +3499,14 @@ exports[`Storyshots UI/HorizontalBarChart with maxValue 1`] = `
                     <ForwardRef(Role)
                       as="span"
                       className="root itemContent"
+                      id="id-test"
                       state={
                         Object {
                           "anchorRect": null,
                           "anchorRef": Object {
                             "current": <span
                               class="root itemContent"
+                              id="id-test"
                               tabindex="0"
                             >
                               <span
@@ -3489,6 +3554,7 @@ exports[`Storyshots UI/HorizontalBarChart with maxValue 1`] = `
                     >
                       <span
                         className="root itemContent"
+                        id="id-test"
                         onBlur={[Function]}
                         onFocus={[Function]}
                         onMouseEnter={[Function]}
@@ -3532,12 +3598,14 @@ exports[`Storyshots UI/HorizontalBarChart with maxValue 1`] = `
                     <ForwardRef(Role)
                       as="span"
                       className="root itemContent"
+                      id="id-test"
                       state={
                         Object {
                           "anchorRect": null,
                           "anchorRef": Object {
                             "current": <span
                               class="root itemContent"
+                              id="id-test"
                               tabindex="0"
                             >
                               <span
@@ -3585,6 +3653,7 @@ exports[`Storyshots UI/HorizontalBarChart with maxValue 1`] = `
                     >
                       <span
                         className="root itemContent"
+                        id="id-test"
                         onBlur={[Function]}
                         onFocus={[Function]}
                         onMouseEnter={[Function]}
@@ -3628,12 +3697,14 @@ exports[`Storyshots UI/HorizontalBarChart with maxValue 1`] = `
                     <ForwardRef(Role)
                       as="span"
                       className="root itemContent"
+                      id="id-test"
                       state={
                         Object {
                           "anchorRect": null,
                           "anchorRef": Object {
                             "current": <span
                               class="root itemContent"
+                              id="id-test"
                               tabindex="0"
                             >
                               <span
@@ -3681,6 +3752,7 @@ exports[`Storyshots UI/HorizontalBarChart with maxValue 1`] = `
                     >
                       <span
                         className="root itemContent"
+                        id="id-test"
                         onBlur={[Function]}
                         onFocus={[Function]}
                         onMouseEnter={[Function]}
@@ -3724,12 +3796,14 @@ exports[`Storyshots UI/HorizontalBarChart with maxValue 1`] = `
                     <ForwardRef(Role)
                       as="span"
                       className="root itemContent"
+                      id="id-test"
                       state={
                         Object {
                           "anchorRect": null,
                           "anchorRef": Object {
                             "current": <span
                               class="root itemContent"
+                              id="id-test"
                               tabindex="0"
                             >
                               <span
@@ -3777,6 +3851,7 @@ exports[`Storyshots UI/HorizontalBarChart with maxValue 1`] = `
                     >
                       <span
                         className="root itemContent"
+                        id="id-test"
                         onBlur={[Function]}
                         onFocus={[Function]}
                         onMouseEnter={[Function]}
diff --git a/packages/ui/src/ui/tooltip/__snapshots__/tooltip.stories.storyshot b/packages/ui/src/ui/tooltip/__snapshots__/tooltip.stories.storyshot
index 608618ef90..9378ecc2d9 100644
--- a/packages/ui/src/ui/tooltip/__snapshots__/tooltip.stories.storyshot
+++ b/packages/ui/src/ui/tooltip/__snapshots__/tooltip.stories.storyshot
@@ -64,13 +64,15 @@ exports[`Storyshots UI/Tooltip darkMode:false 1`] = `
             <ForwardRef(Role)
               as="span"
               className="root"
+              id="id-test"
               state={
                 Object {
                   "anchorRect": null,
                   "anchorRef": Object {
                     "current": <span
-                      aria-labelledby="id-ab3aow"
+                      aria-labelledby="id-test-tooltip"
                       class="root"
+                      id="id-test"
                       tabindex="0"
                     >
                       Job #100
@@ -83,7 +85,7 @@ exports[`Storyshots UI/Tooltip darkMode:false 1`] = `
                     "current": <div
                       aria-hidden="true"
                       class="arrow"
-                      style="position: absolute; font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0;"
+                      style="font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0; position: absolute;"
                     >
                       <svg
                         display="block"
@@ -104,14 +106,14 @@ exports[`Storyshots UI/Tooltip darkMode:false 1`] = `
                   "contentElement": <div
                     class="tooltip"
                     hidden=""
-                    id="id-ab3aow"
+                    id="id-test-tooltip"
                     role="tooltip"
                     style="display: none;"
                   >
                     <div
                       aria-hidden="true"
                       class="arrow"
-                      style="position: absolute; font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0;"
+                      style="font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0; position: absolute;"
                     >
                       <svg
                         display="block"
@@ -148,14 +150,14 @@ exports[`Storyshots UI/Tooltip darkMode:false 1`] = `
                       <div
                         class="tooltip"
                         hidden=""
-                        id="id-ab3aow"
+                        id="id-test-tooltip"
                         role="tooltip"
                         style="display: none;"
                       >
                         <div
                           aria-hidden="true"
                           class="arrow"
-                          style="position: absolute; font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0;"
+                          style="font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0; position: absolute;"
                         >
                           <svg
                             display="block"
@@ -192,8 +194,9 @@ exports[`Storyshots UI/Tooltip darkMode:false 1`] = `
               }
             >
               <span
-                aria-labelledby="id-ab3aow"
+                aria-labelledby="id-test-tooltip"
                 className="root"
+                id="id-test"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onMouseEnter={[Function]}
@@ -205,13 +208,15 @@ exports[`Storyshots UI/Tooltip darkMode:false 1`] = `
             </ForwardRef(Role)>
             <ForwardRef(Role)
               className="tooltip"
+              id="id-test-tooltip"
               state={
                 Object {
                   "anchorRect": null,
                   "anchorRef": Object {
                     "current": <span
-                      aria-labelledby="id-ab3aow"
+                      aria-labelledby="id-test-tooltip"
                       class="root"
+                      id="id-test"
                       tabindex="0"
                     >
                       Job #100
@@ -224,7 +229,7 @@ exports[`Storyshots UI/Tooltip darkMode:false 1`] = `
                     "current": <div
                       aria-hidden="true"
                       class="arrow"
-                      style="position: absolute; font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0;"
+                      style="font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0; position: absolute;"
                     >
                       <svg
                         display="block"
@@ -245,14 +250,14 @@ exports[`Storyshots UI/Tooltip darkMode:false 1`] = `
                   "contentElement": <div
                     class="tooltip"
                     hidden=""
-                    id="id-ab3aow"
+                    id="id-test-tooltip"
                     role="tooltip"
                     style="display: none;"
                   >
                     <div
                       aria-hidden="true"
                       class="arrow"
-                      style="position: absolute; font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0;"
+                      style="font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0; position: absolute;"
                     >
                       <svg
                         display="block"
@@ -289,14 +294,14 @@ exports[`Storyshots UI/Tooltip darkMode:false 1`] = `
                       <div
                         class="tooltip"
                         hidden=""
-                        id="id-ab3aow"
+                        id="id-test-tooltip"
                         role="tooltip"
                         style="display: none;"
                       >
                         <div
                           aria-hidden="true"
                           class="arrow"
-                          style="position: absolute; font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0;"
+                          style="font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0; position: absolute;"
                         >
                           <svg
                             display="block"
@@ -335,7 +340,7 @@ exports[`Storyshots UI/Tooltip darkMode:false 1`] = `
               <Portal
                 containerInfo={
                   <div
-                    id="id-vnv9c5"
+                    id="id-test-tooltip-portal"
                   >
                     <div
                       style="position: absolute; left: 0px; top: 0px; margin: 0px;"
@@ -343,14 +348,14 @@ exports[`Storyshots UI/Tooltip darkMode:false 1`] = `
                       <div
                         class="tooltip"
                         hidden=""
-                        id="id-ab3aow"
+                        id="id-test-tooltip"
                         role="tooltip"
                         style="display: none;"
                       >
                         <div
                           aria-hidden="true"
                           class="arrow"
-                          style="position: absolute; font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0;"
+                          style="font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0; position: absolute;"
                         >
                           <svg
                             display="block"
@@ -377,7 +382,7 @@ exports[`Storyshots UI/Tooltip darkMode:false 1`] = `
                   <div
                     className="tooltip"
                     hidden={true}
-                    id="id-ab3aow"
+                    id="id-test-tooltip"
                     onAnimationEnd={[Function]}
                     onTransitionEnd={[Function]}
                     role="tooltip"
@@ -395,8 +400,9 @@ exports[`Storyshots UI/Tooltip darkMode:false 1`] = `
                           "anchorRect": null,
                           "anchorRef": Object {
                             "current": <span
-                              aria-labelledby="id-ab3aow"
+                              aria-labelledby="id-test-tooltip"
                               class="root"
+                              id="id-test"
                               tabindex="0"
                             >
                               Job #100
@@ -409,7 +415,7 @@ exports[`Storyshots UI/Tooltip darkMode:false 1`] = `
                             "current": <div
                               aria-hidden="true"
                               class="arrow"
-                              style="position: absolute; font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0;"
+                              style="font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0; position: absolute;"
                             >
                               <svg
                                 display="block"
@@ -430,14 +436,14 @@ exports[`Storyshots UI/Tooltip darkMode:false 1`] = `
                           "contentElement": <div
                             class="tooltip"
                             hidden=""
-                            id="id-ab3aow"
+                            id="id-test-tooltip"
                             role="tooltip"
                             style="display: none;"
                           >
                             <div
                               aria-hidden="true"
                               class="arrow"
-                              style="position: absolute; font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0;"
+                              style="font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0; position: absolute;"
                             >
                               <svg
                                 display="block"
@@ -474,14 +480,14 @@ exports[`Storyshots UI/Tooltip darkMode:false 1`] = `
                               <div
                                 class="tooltip"
                                 hidden=""
-                                id="id-ab3aow"
+                                id="id-test-tooltip"
                                 role="tooltip"
                                 style="display: none;"
                               >
                                 <div
                                   aria-hidden="true"
                                   class="arrow"
-                                  style="position: absolute; font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0;"
+                                  style="font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0; position: absolute;"
                                 >
                                   <svg
                                     display="block"
@@ -844,13 +850,15 @@ exports[`Storyshots UI/Tooltip default 1`] = `
             <ForwardRef(Role)
               as="span"
               className="root"
+              id="id-test"
               state={
                 Object {
                   "anchorRect": null,
                   "anchorRef": Object {
                     "current": <span
-                      aria-labelledby="id-e8h2w0"
+                      aria-labelledby="id-test-tooltip"
                       class="root"
+                      id="id-test"
                       tabindex="0"
                     >
                       Job #100
@@ -863,7 +871,7 @@ exports[`Storyshots UI/Tooltip default 1`] = `
                     "current": <div
                       aria-hidden="true"
                       class="arrow"
-                      style="position: absolute; font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0;"
+                      style="font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0; position: absolute;"
                     >
                       <svg
                         display="block"
@@ -884,14 +892,14 @@ exports[`Storyshots UI/Tooltip default 1`] = `
                   "contentElement": <div
                     class="tooltip tooltipDarkMode"
                     hidden=""
-                    id="id-e8h2w0"
+                    id="id-test-tooltip"
                     role="tooltip"
                     style="display: none;"
                   >
                     <div
                       aria-hidden="true"
                       class="arrow"
-                      style="position: absolute; font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0;"
+                      style="font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0; position: absolute;"
                     >
                       <svg
                         display="block"
@@ -928,14 +936,14 @@ exports[`Storyshots UI/Tooltip default 1`] = `
                       <div
                         class="tooltip tooltipDarkMode"
                         hidden=""
-                        id="id-e8h2w0"
+                        id="id-test-tooltip"
                         role="tooltip"
                         style="display: none;"
                       >
                         <div
                           aria-hidden="true"
                           class="arrow"
-                          style="position: absolute; font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0;"
+                          style="font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0; position: absolute;"
                         >
                           <svg
                             display="block"
@@ -972,8 +980,9 @@ exports[`Storyshots UI/Tooltip default 1`] = `
               }
             >
               <span
-                aria-labelledby="id-e8h2w0"
+                aria-labelledby="id-test-tooltip"
                 className="root"
+                id="id-test"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onMouseEnter={[Function]}
@@ -985,13 +994,15 @@ exports[`Storyshots UI/Tooltip default 1`] = `
             </ForwardRef(Role)>
             <ForwardRef(Role)
               className="tooltip tooltipDarkMode"
+              id="id-test-tooltip"
               state={
                 Object {
                   "anchorRect": null,
                   "anchorRef": Object {
                     "current": <span
-                      aria-labelledby="id-e8h2w0"
+                      aria-labelledby="id-test-tooltip"
                       class="root"
+                      id="id-test"
                       tabindex="0"
                     >
                       Job #100
@@ -1004,7 +1015,7 @@ exports[`Storyshots UI/Tooltip default 1`] = `
                     "current": <div
                       aria-hidden="true"
                       class="arrow"
-                      style="position: absolute; font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0;"
+                      style="font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0; position: absolute;"
                     >
                       <svg
                         display="block"
@@ -1025,14 +1036,14 @@ exports[`Storyshots UI/Tooltip default 1`] = `
                   "contentElement": <div
                     class="tooltip tooltipDarkMode"
                     hidden=""
-                    id="id-e8h2w0"
+                    id="id-test-tooltip"
                     role="tooltip"
                     style="display: none;"
                   >
                     <div
                       aria-hidden="true"
                       class="arrow"
-                      style="position: absolute; font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0;"
+                      style="font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0; position: absolute;"
                     >
                       <svg
                         display="block"
@@ -1069,14 +1080,14 @@ exports[`Storyshots UI/Tooltip default 1`] = `
                       <div
                         class="tooltip tooltipDarkMode"
                         hidden=""
-                        id="id-e8h2w0"
+                        id="id-test-tooltip"
                         role="tooltip"
                         style="display: none;"
                       >
                         <div
                           aria-hidden="true"
                           class="arrow"
-                          style="position: absolute; font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0;"
+                          style="font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0; position: absolute;"
                         >
                           <svg
                             display="block"
@@ -1115,7 +1126,7 @@ exports[`Storyshots UI/Tooltip default 1`] = `
               <Portal
                 containerInfo={
                   <div
-                    id="id-e67iku"
+                    id="id-test-tooltip-portal"
                   >
                     <div
                       style="position: absolute; left: 0px; top: 0px; margin: 0px;"
@@ -1123,14 +1134,14 @@ exports[`Storyshots UI/Tooltip default 1`] = `
                       <div
                         class="tooltip tooltipDarkMode"
                         hidden=""
-                        id="id-e8h2w0"
+                        id="id-test-tooltip"
                         role="tooltip"
                         style="display: none;"
                       >
                         <div
                           aria-hidden="true"
                           class="arrow"
-                          style="position: absolute; font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0;"
+                          style="font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0; position: absolute;"
                         >
                           <svg
                             display="block"
@@ -1157,7 +1168,7 @@ exports[`Storyshots UI/Tooltip default 1`] = `
                   <div
                     className="tooltip tooltipDarkMode"
                     hidden={true}
-                    id="id-e8h2w0"
+                    id="id-test-tooltip"
                     onAnimationEnd={[Function]}
                     onTransitionEnd={[Function]}
                     role="tooltip"
@@ -1175,8 +1186,9 @@ exports[`Storyshots UI/Tooltip default 1`] = `
                           "anchorRect": null,
                           "anchorRef": Object {
                             "current": <span
-                              aria-labelledby="id-e8h2w0"
+                              aria-labelledby="id-test-tooltip"
                               class="root"
+                              id="id-test"
                               tabindex="0"
                             >
                               Job #100
@@ -1189,7 +1201,7 @@ exports[`Storyshots UI/Tooltip default 1`] = `
                             "current": <div
                               aria-hidden="true"
                               class="arrow"
-                              style="position: absolute; font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0;"
+                              style="font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0; position: absolute;"
                             >
                               <svg
                                 display="block"
@@ -1210,14 +1222,14 @@ exports[`Storyshots UI/Tooltip default 1`] = `
                           "contentElement": <div
                             class="tooltip tooltipDarkMode"
                             hidden=""
-                            id="id-e8h2w0"
+                            id="id-test-tooltip"
                             role="tooltip"
                             style="display: none;"
                           >
                             <div
                               aria-hidden="true"
                               class="arrow"
-                              style="position: absolute; font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0;"
+                              style="font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0; position: absolute;"
                             >
                               <svg
                                 display="block"
@@ -1254,14 +1266,14 @@ exports[`Storyshots UI/Tooltip default 1`] = `
                               <div
                                 class="tooltip tooltipDarkMode"
                                 hidden=""
-                                id="id-e8h2w0"
+                                id="id-test-tooltip"
                                 role="tooltip"
                                 style="display: none;"
                               >
                                 <div
                                   aria-hidden="true"
                                   class="arrow"
-                                  style="position: absolute; font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0;"
+                                  style="font-size: 12px; width: 1em; height: 1em; pointer-events: none; fill: none; stroke: none; stroke-width: 0; position: absolute;"
                                 >
                                   <svg
                                     display="block"
diff --git a/packages/ui/src/ui/tooltip/tooltip.jsx b/packages/ui/src/ui/tooltip/tooltip.jsx
index 1eeb61284f..fed16e91db 100644
--- a/packages/ui/src/ui/tooltip/tooltip.jsx
+++ b/packages/ui/src/ui/tooltip/tooltip.jsx
@@ -21,22 +21,27 @@ export const Tooltip = (props) => {
     ...restProps
   } = props;
 
-  const rootClassName = cx(css.root, className);
   const tooltip = useTooltipState({ placement: 'top' });
+  const baseId = process.env.NODE_ENV === 'test' && 'id-test';
 
   return (
     <>
       <UITooltipAnchor
         as={Component}
-        className={rootClassName}
+        className={cx(css.root, className)}
         state={tooltip}
         {...(ref ? { ref } : {})}
         {...restProps}
+        {...(baseId && { id: baseId })}
       >
         {children}
       </UITooltipAnchor>
       {title && (
-        <UITooltip state={tooltip} className={cx(css.tooltip, darkMode && css.tooltipDarkMode)}>
+        <UITooltip
+          state={tooltip}
+          className={cx(css.tooltip, darkMode && css.tooltipDarkMode)}
+          {...(baseId && { id: `${baseId}-tooltip` })}
+        >
           <UITooltipArrow state={tooltip} className={css.arrow} size={12} />
           {title}
         </UITooltip>