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
apage43 · Apr 4, 2023 · 77e825a · 77e825a
1 parent 13fdaf3
commit 77e825a
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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'];