From 77e825ae8405cf8e78bba2b68cbb7f8afe58c24e Mon Sep 17 00:00:00 2001
From: hummingly <31522351+hummingly@users.noreply.github.com>
Date: Tue, 4 Apr 2023 22:52:49 +0200
Subject: [PATCH] Fix tooltip not working literally anywhere except main window
 * eslint & co. do not err when accidentially adding data atributes to React
 components * somehow buttons are not instances of HTML elements

---
 .../containers/Outliner/TagsPanel/TagMerge.tsx         |  2 +-
 src/frontend/containers/Settings/Appearance.tsx        |  4 ++--
 widgets/Button/index.tsx                               | 10 +++++++++-
 widgets/Combobox/GridCombobox.tsx                      |  5 +++--
 widgets/popovers/Tooltip.tsx                           |  4 ++--
 5 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/frontend/containers/Outliner/TagsPanel/TagMerge.tsx b/src/frontend/containers/Outliner/TagsPanel/TagMerge.tsx
index 99e1ab88b..cff6c1a87 100644
--- a/src/frontend/containers/Outliner/TagsPanel/TagMerge.tsx
+++ b/src/frontend/containers/Outliner/TagsPanel/TagMerge.tsx
@@ -96,7 +96,7 @@ const renderTagOption = action((tag: ClientTag, index: number, selection: boolea
   const hint = path.slice(0, Math.max(0, path.length - tag.name.length - 3));
 
   return (
-    <GridOption key={id} rowIndex={index} selected={selection || undefined} data-tooltip={path}>
+    <GridOption key={id} rowIndex={index} selected={selection || undefined} tooltip={path}>
       <GridOptionCell id={id} colIndex={1}>
         <span
           className="combobox-popup-option-icon"
diff --git a/src/frontend/containers/Settings/Appearance.tsx b/src/frontend/containers/Settings/Appearance.tsx
index ec463c1bd..8723377ea 100644
--- a/src/frontend/containers/Settings/Appearance.tsx
+++ b/src/frontend/containers/Settings/Appearance.tsx
@@ -144,13 +144,13 @@ const CustomThemePicker = () => {
         icon={IconSet.FOLDER_CLOSE}
         text="Add..."
         onClick={() => shell.openExternal(themeDir)}
-        data-tooltip="Open the directory containing the theme files"
+        tooltip="Open the directory containing the theme files"
       />
       <Button
         icon={IconSet.RELOAD}
         text="Refresh"
         onClick={refresh}
-        data-tooltip="Reload the list of themes and current theme"
+        tooltip="Reload the list of themes and current theme"
       />
     </div>
   );
diff --git a/widgets/Button/index.tsx b/widgets/Button/index.tsx
index 698baae93..d669fdd89 100644
--- a/widgets/Button/index.tsx
+++ b/widgets/Button/index.tsx
@@ -9,6 +9,7 @@ type ButtonProps = {
   styling?: 'minimal' | 'outlined' | 'filled';
   disabled?: boolean;
   type?: 'button' | 'submit' | 'reset';
+  tooltip?: string;
 };
 
 const Button = ({
@@ -18,9 +19,16 @@ const Button = ({
   styling = 'minimal',
   disabled,
   type = 'button',
+  tooltip,
 }: ButtonProps) => {
   return (
-    <button className={`btn-${styling}`} onClick={onClick} disabled={disabled} type={type}>
+    <button
+      className={`btn-${styling}`}
+      onClick={onClick}
+      disabled={disabled}
+      type={type}
+      data-tooltip={tooltip}
+    >
       {icon}
       {text}
     </button>
diff --git a/widgets/Combobox/GridCombobox.tsx b/widgets/Combobox/GridCombobox.tsx
index dad144f26..9c53f1ac9 100644
--- a/widgets/Combobox/GridCombobox.tsx
+++ b/widgets/Combobox/GridCombobox.tsx
@@ -326,12 +326,13 @@ interface RowProps {
   rowIndex: number;
   selected?: boolean;
   children: React.ReactElement<CellProps> | React.ReactElement<CellProps>[];
+  tooltip?: string;
 }
 
-export const GridOption = ({ rowIndex, selected, children, ...props }: RowProps) => {
+export const GridOption = ({ rowIndex, selected, children, tooltip }: RowProps) => {
   return (
     <div
-      {...props}
+      data-tooltip={tooltip}
       role="row"
       aria-rowindex={rowIndex}
       aria-selected={selected}
diff --git a/widgets/popovers/Tooltip.tsx b/widgets/popovers/Tooltip.tsx
index d3de8359a..feb9981c1 100644
--- a/widgets/popovers/Tooltip.tsx
+++ b/widgets/popovers/Tooltip.tsx
@@ -22,8 +22,8 @@ export const TooltipLayer = ({ document }: { document: Document }) => {
     reference(virtualElement.current);
 
     const handleShow = (e: MouseEvent | FocusEvent): HTMLElement | undefined => {
-      const target = e.target;
-      if (!(target instanceof HTMLElement) || !target.dataset['tooltip']) {
+      const target = e.target as any;
+      if (target === null || !("dataset" in target) || !(target.dataset as any)['tooltip']) {
         return;
       }
       content.current = target.dataset['tooltip'];