refactor: reuse tooltip styles

Moves out the tooltip styles to make them easier to reuse.

Author: crisbeto

report-app/src/app/shared/styles/tooltip.scss

@@ -0,0 +1,39 @@
+@mixin tooltip-styles {
+  .has-tooltip {
+    position: relative;
+
+    &::before {
+      font-family: var(--font-family);
+      content: attr(data-tooltip);
+      position: absolute;
+      bottom: 110%;
+      left: 50%;
+      transform: translateX(-50%);
+      background-color: var(--tooltip-background-color);
+      color: var(--tooltip-text-color);
+      padding: 6px 12px;
+      border-radius: 6px;
+      font-size: 13px;
+      line-height: 1.5;
+      opacity: 0;
+      visibility: hidden;
+      overflow: hidden;
+      white-space: nowrap;
+      transition:
+        opacity 0.2s ease-in-out,
+        visibility 0.2s ease-in-out;
+      z-index: 10;
+      display: block;
+    }
+
+    &.multiline-tooltip::before {
+      white-space: normal;
+      max-width: 400px;
+    }
+
+    &:hover::before {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+}

report-app/src/app/shared/visualization/stacked-bar-chart/stacked-bar-chart.html

@@ -8,8 +8,8 @@
           [style.width.%]="asPercent(item.value)"
           [style.background-color]="item.color"
           (click)="toggleDisplayMode()"
-          [attr.data-tooltip]="showLegend() ? null : item.label"
-        >
+          [class.has-tooltip]="!showLegend()"
+          [attr.data-tooltip]="item.label">
           {{ getItemDisplayValue(item) }}
         </div>
       }

report-app/src/app/shared/visualization/stacked-bar-chart/stacked-bar-chart.scss

@@ -51,31 +51,6 @@
   &:hover {
     filter: brightness(1.1);
   }
-
-  &[data-tooltip]::before {
-    content: attr(data-tooltip); // Use a data attribute for the text
-    position: absolute;
-    bottom: 110%; // Position it above the segment
-    left: 50%;
-    transform: translateX(-50%);
-    background-color: var(--tooltip-background-color);
-    color: var(--tooltip-text-color);
-    padding: 6px 12px;
-    border-radius: 6px;
-    font-size: 13px;
-    white-space: nowrap;
-    opacity: 0;
-    visibility: hidden;
-    transition:
-      opacity 0.2s ease-in-out,
-      visibility 0.2s ease-in-out;
-    z-index: 10;
-  }
-
-  &[data-tooltip]:hover::before {
-    opacity: 1;
-    visibility: visible;
-  }
 }
 
 .legend {

report-app/src/styles.scss

@@ -3,6 +3,7 @@
 @use './app/shared/styles/callouts';
 @use './app/shared/styles/cards';
 @use './app/shared/styles/statuses';
+@use './app/shared/styles/tooltip';
 
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
@@ -80,6 +81,7 @@ hr {
 @include callouts.callout-styles;
 @include cards.card-styles;
 @include statuses.status-styles;
+@include tooltip.tooltip-styles;
 
 ::view-transition-old(count),
 ::view-transition-new(count) {