From 72b572978037da12346ab098fc6943ea76a98ba5 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Tue, 15 Mar 2022 15:51:28 +0300
Subject: [PATCH] Add hover tooltip

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/dock/dock-tab.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/dock/dock-tab.tsx b/src/renderer/components/dock/dock-tab.tsx
index 8336aed08e..bf3e80a9d2 100644
--- a/src/renderer/components/dock/dock-tab.tsx
+++ b/src/renderer/components/dock/dock-tab.tsx
@@ -16,6 +16,7 @@ import { observable, makeObservable } from "mobx";
 import { isMac } from "../../../common/vars";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import dockStoreInjectable from "./dock/store.injectable";
+import { Tooltip, TooltipPosition } from "../tooltip";
 
 export interface DockTabProps extends TabProps<DockTabModel> {
   moreActions?: React.ReactNode;
@@ -80,7 +81,7 @@ class NonInjectedDockTab extends React.Component<DockTabProps & Dependencies> {
     const { title, pinned } = tabProps.value;
     const label = (
       <div className="flex gaps align-center" onAuxClick={isMiddleClick(prevDefault(this.close))}>
-        <span className={styles.title} title={title}>{title}</span>
+        <span className={styles.title}>{title}</span>
         {moreActions}
         {!pinned && (
           <div className={styles.close}>
@@ -91,6 +92,11 @@ class NonInjectedDockTab extends React.Component<DockTabProps & Dependencies> {
             />
           </div>
         )}
+        <Tooltip
+          targetId={`tab-${this.tabId}`}
+          preferredPositions={[TooltipPosition.BOTTOM, TooltipPosition.BOTTOM_LEFT]}
+          style={{ transitionDelay: "500ms" }}
+        >{title}</Tooltip>
       </div>
     );