feat: column title tooltip (#4279)

src/components/Column/Column.scss

@@ -96,6 +96,11 @@
   color: $color-middle-gray;
 }
 
+// tooltip requires parent selection because of specificity
+.column__header-text-wrapper .column__tooltip {
+  @include tooltip--light;
+}
+
 .column__header-input {
   display: flex;
   align-items: center;
@@ -168,6 +173,10 @@
     color: $color-middle-gray;
   }
 
+  .column__header-text-wrapper .column__tooltip {
+    @include tooltip--dark;
+  }
+
   .column__notes-wrapper {
     scrollbar-color: $color-darkest-gray $color-dark-mode-note;
   }

src/components/Column/Column.tsx

@@ -3,6 +3,7 @@ import {Color, getColorClassName} from "constants/colors";
 import {NoteInput} from "components/NoteInput";
 import {useEffect, useRef, useState} from "react";
 import classNames from "classnames";
+import {Tooltip} from "react-tooltip";
 import {useAppSelector} from "store";
 import {Actions} from "store/action";
 import {Close, MarkAsDone, Hidden, ThreeDots} from "components/Icon";
@@ -93,6 +94,7 @@ export const Column = ({id, name, color, visible, index}: ColumnProps) => {
       <div className={classNames("column__header-text-wrapper", {"column__header-text-wrapper--hidden": !visible})}>
         {!visible && <Hidden className="column__header-hidden-icon" title={t("Column.hiddenColumn")} onClick={toggleVisibilityHandler} />}
         <h2
+          id={`column-${id}`}
           onDoubleClick={() => {
             if (isModerator) {
               setColumnNameMode("EDIT");
@@ -102,6 +104,9 @@ export const Column = ({id, name, color, visible, index}: ColumnProps) => {
         >
           {name}
         </h2>
+        <Tooltip className="column__tooltip" anchorSelect={`#column-${id}`}>
+          {name}
+        </Tooltip>
       </div>
     ) : (
       <input

src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap

@@ -25,6 +25,7 @@ exports[`Column should have correct style show column with correct style 1`] = `
           </svg>
           <h2
             class="column__header-text column__header-text--hidden"
+            id="column-test-columns-id-1"
           >
             Testheader 1
           </h2>

src/components/TooltipPortal/TooltipPortal.scss

@@ -1,26 +1,4 @@
-@import "src/constants/style";
-
-$tooltip-max-width: 80%;
-
-// tooltip
-@mixin tooltip {
-  z-index: $tooltip-z-index;
-  border-radius: $rounded--large;
-  max-width: $tooltip-max-width;
-  font-size: $text--sm;
-}
-
-@mixin tooltip--light {
-  @include tooltip;
-  color: $color-black;
-  background-color: $hover-background-light;
-}
-
-@mixin tooltip--dark {
-  @include tooltip;
-  color: $color-white;
-  background-color: $hover-background-dark;
-}
+@import "constants/style";
 
 // selecting .tooltip-portal directly won't work because of CSS specificity
 .tooltip-portal__root .tooltip-portal {

src/constants/style.scss

@@ -264,3 +264,23 @@ $column-stripes--dark: repeating-linear-gradient(
     }
   }
 }
+
+// tooltip
+@mixin tooltip {
+  z-index: $tooltip-z-index;
+  border-radius: $rounded--large;
+  max-width: 80%;
+  font-size: $text--sm;
+}
+
+@mixin tooltip--light {
+  @include tooltip;
+  color: $color-black;
+  background-color: $hover-background-light;
+}
+
+@mixin tooltip--dark {
+  @include tooltip;
+  color: $color-white;
+  background-color: $hover-background-dark;
+}