From 8638de726389ea793c28fd16fffd0160f5adf4dd Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Wed, 12 Jan 2022 13:58:46 +0300
Subject: [PATCH] Show tooltip with hotbar name manually

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/hotbar/hotbar-selector.tsx     | 70 +++++++++++++------
 src/renderer/components/tooltip/tooltip.tsx   | 11 ++-
 2 files changed, 58 insertions(+), 23 deletions(-)

diff --git a/src/renderer/components/hotbar/hotbar-selector.tsx b/src/renderer/components/hotbar/hotbar-selector.tsx
index 34f0ecf847..d0e25bf437 100644
--- a/src/renderer/components/hotbar/hotbar-selector.tsx
+++ b/src/renderer/components/hotbar/hotbar-selector.tsx
@@ -20,12 +20,12 @@
  */
 
 import "./hotbar-selector.scss";
-import React from "react";
+import React, { useRef, useState } from "react";
 import { Icon } from "../icon";
 import { Badge } from "../badge";
 import hotbarManagerInjectable from "../../../common/hotbar-store.injectable";
 import { HotbarSwitchCommand } from "./hotbar-switch-command";
-import { TooltipPosition } from "../tooltip";
+import { Tooltip, TooltipPosition } from "../tooltip";
 import { observer } from "mobx-react";
 import type { Hotbar } from "../../../common/hotbar-types";
 import { withInjectables } from "@ogre-tools/injectable-react";
@@ -45,25 +45,55 @@ interface Dependencies {
   openCommandOverlay: (component: React.ReactElement) => void;
 }
 
-const NonInjectedHotbarSelector = observer(({ hotbar, hotbarManager, openCommandOverlay }: HotbarSelectorProps & Dependencies) => (
-  <div className="HotbarSelector flex align-center">
-    <Icon material="play_arrow" className="previous box" onClick={() => hotbarManager.switchToPrevious()} />
-    <div className="box grow flex align-center">
-      <Badge
-        id="hotbarIndex"
-        small
-        label={hotbarManager.getDisplayIndex(hotbarManager.getActive())}
-        onClick={() => openCommandOverlay(<HotbarSwitchCommand />)}
-        tooltip={{
-          preferredPositions: [TooltipPosition.TOP, TooltipPosition.TOP_LEFT],
-          children: hotbar.name,
-        }}
-        className="SelectorIndex"
-      />
+const NonInjectedHotbarSelector = observer(({ hotbar, hotbarManager, openCommandOverlay }: HotbarSelectorProps & Dependencies) => {
+  const [tooltipVisible, setTooltipVisible] = useState(false);
+  const tooltipTimeout = useRef<NodeJS.Timeout>();
+
+  const clearTimer = () => {
+    clearTimeout(tooltipTimeout.current);
+  }
+
+  const onTooltipShow = () => {
+    setTooltipVisible(true);
+    clearTimer();
+    tooltipTimeout.current = setTimeout(() => setTooltipVisible(false), 1500);
+  };
+
+  const onArrowClick = (switchTo: () => void) => {
+    onTooltipShow();
+    switchTo();
+  };
+
+  const onMouseEvent = (event: React.MouseEvent) => {
+    clearTimer();
+    setTooltipVisible(event.type == "mouseenter");
+  };
+
+  return (
+    <div className="HotbarSelector flex align-center">
+      <Icon material="play_arrow" className="previous box" onClick={() => onArrowClick(hotbarManager.switchToPrevious)} />
+      <div className="box grow flex align-center">
+        <Badge
+          id="hotbarIndex"
+          small
+          label={hotbarManager.getDisplayIndex(hotbarManager.getActive())}
+          onClick={() => openCommandOverlay(<HotbarSwitchCommand />)}
+          className="SelectorIndex"
+          onMouseEnter={onMouseEvent}
+          onMouseLeave={onMouseEvent}
+        />
+        <Tooltip
+          visible={tooltipVisible}
+          targetId="hotbarIndex"
+          preferredPositions={[TooltipPosition.TOP, TooltipPosition.TOP_LEFT]}
+        >
+          {hotbar.name}
+        </Tooltip>
+      </div>
+      <Icon material="play_arrow" className="next box" onClick={() => onArrowClick(hotbarManager.switchToNext)} />
     </div>
-    <Icon material="play_arrow" className="next box" onClick={() => hotbarManager.switchToNext()} />
-  </div>
-));
+  );
+});
 
 export const HotbarSelector = withInjectables<Dependencies, HotbarSelectorProps>(NonInjectedHotbarSelector, {
   getProps: (di, props) => ({
diff --git a/src/renderer/components/tooltip/tooltip.tsx b/src/renderer/components/tooltip/tooltip.tsx
index 179224ee32..de41b09623 100644
--- a/src/renderer/components/tooltip/tooltip.tsx
+++ b/src/renderer/components/tooltip/tooltip.tsx
@@ -70,7 +70,7 @@ export class Tooltip extends React.Component<TooltipProps> {
 
   @observable.ref elem: HTMLElement;
   @observable activePosition: TooltipPosition;
-  @observable isVisible = !!this.props.visible;
+  @observable isVisible = false;
 
   constructor(props: TooltipProps) {
     super(props);
@@ -92,6 +92,11 @@ export class Tooltip extends React.Component<TooltipProps> {
   componentDidMount() {
     this.hoverTarget.addEventListener("mouseenter", this.onEnterTarget);
     this.hoverTarget.addEventListener("mouseleave", this.onLeaveTarget);
+    this.refreshPosition();
+  }
+
+  componentDidUpdate() {
+    this.refreshPosition();
   }
 
   componentWillUnmount() {
@@ -226,9 +231,9 @@ export class Tooltip extends React.Component<TooltipProps> {
   }
 
   render() {
-    const { style, formatters, usePortal, children } = this.props;
+    const { style, formatters, usePortal, children, visible } = this.props;
     const className = cssNames("Tooltip", this.props.className, formatters, this.activePosition, {
-      invisible: !this.isVisible,
+      invisible: visible === undefined ? !this.isVisible : !visible,
       formatter: !!formatters,
     });
     const tooltip = (