Add tooltip to comparison table row path (#2490)

iterative · Sep 29, 2022 · 1953b6e · 1953b6e
1 parent 625f719
commit 1953b6e
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/webview/src/plots/components/comparisonTable/ComparisonTableRow.tsx b/webview/src/plots/components/comparisonTable/ComparisonTableRow.tsx
@@ -11,6 +11,7 @@ import { ChevronDown, ChevronRight } from '../../../shared/components/icons'
 import { PlotsState } from '../../store'
 import { CopyButton } from '../../../shared/components/copyButton/CopyButton'
 import { isSelecting } from '../../../util/strings'
+import Tooltip from '../../../shared/components/tooltip/Tooltip'
 
 export interface ComparisonTableRowProps {
   path: string
@@ -44,7 +45,13 @@ export const ComparisonTableRow: React.FC<ComparisonTableRowProps> = ({
           <div className={styles.rowPath}>
             <button className={styles.rowToggler} onClick={toggleIsShownState}>
               <Icon icon={isShown ? ChevronDown : ChevronRight} />
-              <span className={styles.pathText}>{path}</span>
+              <Tooltip
+                content={path}
+                placement="bottom-start"
+                delay={[1000, 0]}
+              >
+                <span className={styles.pathText}>{path}</span>
+              </Tooltip>
             </button>
             <CopyButton value={path} className={styles.copyButton} />
           </div>