From 476235b861d14faa1e97e410d4b67e0fdd7a6f10 Mon Sep 17 00:00:00 2001
From: Jari Kolehmainen <jari.kolehmainen@gmail.com>
Date: Fri, 23 Apr 2021 18:39:40 +0300
Subject: [PATCH] Add tooltip to hotbar index (#2604)

* add tooltip to hotbar index

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* cleanup

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
---
 src/renderer/components/hotbar/hotbar-menu.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/hotbar/hotbar-menu.tsx b/src/renderer/components/hotbar/hotbar-menu.tsx
index 197671b034..ac99a45226 100644
--- a/src/renderer/components/hotbar/hotbar-menu.tsx
+++ b/src/renderer/components/hotbar/hotbar-menu.tsx
@@ -12,6 +12,7 @@ import { Icon } from "../icon";
 import { Badge } from "../badge";
 import { CommandOverlay } from "../command-palette";
 import { HotbarSwitchCommand } from "./hotbar-switch-command";
+import { Tooltip, TooltipPosition } from "../tooltip";
 
 interface Props {
   className?: IClassName;
@@ -43,7 +44,9 @@ export class HotbarMenu extends React.Component<Props> {
 
   render() {
     const { className } = this.props;
-    const hotbarIndex = HotbarStore.getInstance().activeHotbarIndex + 1;
+    const hotbarStore = HotbarStore.getInstance();
+    const hotbar = hotbarStore.getActive();
+    const activeIndexDisplay = hotbarStore.activeHotbarIndex + 1;
 
     return (
       <div className={cssNames("HotbarMenu flex column", className)}>
@@ -63,7 +66,13 @@ export class HotbarMenu extends React.Component<Props> {
         <div className="HotbarSelector flex gaps auto">
           <Icon material="chevron_left" className="previous box" onClick={() => this.previous()} />
           <div className="box">
-            <Badge small label={hotbarIndex} onClick={() => this.openSelector()} />
+            <Badge id="hotbarIndex" small label={activeIndexDisplay} onClick={() => this.openSelector()} />
+            <Tooltip
+              targetId="hotbarIndex"
+              preferredPositions={TooltipPosition.TOP}
+            >
+              {hotbar.name}
+            </Tooltip>
           </div>
           <Icon material="chevron_right" className="next box" onClick={() => this.next()} />
         </div>