Fixing tooltips to use single component (#3194)

* Removing MaterialTooltip references

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Removing MaterialTooltip component

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Removing entity icon hover effect in catalog and settings

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Align share and close tooltip positions

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing EnityIcon selector

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Reverting back selector changes

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Removing explicit interactive prop

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Removing interactive prop from catalog icons

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/hotbar/hotbar-entity-icon.tsx

@@ -140,6 +140,7 @@ export class HotbarEntityIcon extends React.Component<Props> {
         active={isActive}
         onMenuOpen={onOpen}
         menuItems={this.contextMenu.menuItems}
+        tooltip={`${entity.metadata.name} (${entity.metadata.source})`}
         {...elemProps}
       >
         { this.ledIcon }

src/renderer/components/hotbar/hotbar-icon.scss

@@ -72,9 +72,11 @@
       box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
     }
 
-    &:hover {
-      &:not(.active) {
-        box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff50;
+    &.interactive {
+      &:hover {
+        &:not(.active) {
+          box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff50;
+        }
       }
     }
   }

src/renderer/components/hotbar/hotbar-icon.tsx

@@ -27,10 +27,10 @@ import type { CatalogEntityContextMenu } from "../../../common/catalog";
 import { cssNames, IClassName } from "../../utils";
 import { ConfirmDialog } from "../confirm-dialog";
 import { Menu, MenuItem } from "../menu";
-import { MaterialTooltip } from "../material-tooltip/material-tooltip";
 import { observer } from "mobx-react";
 import { Avatar } from "../avatar/avatar";
 import { Icon } from "../icon";
+import { Tooltip } from "../tooltip";
 
 export interface HotbarIconProps extends DOMAttributes<HTMLElement> {
   uid: string;
@@ -45,6 +45,7 @@ export interface HotbarIconProps extends DOMAttributes<HTMLElement> {
   disabled?: boolean;
   size?: number;
   background?: string;
+  tooltip?: string;
 }
 
 function onMenuItemClick(menuItem: CatalogEntityContextMenu) {
@@ -64,7 +65,7 @@ function onMenuItemClick(menuItem: CatalogEntityContextMenu) {
   }
 }
 
-export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: HotbarIconProps) => {
+export const HotbarIcon = observer(({menuItems = [], size = 40, tooltip, ...props}: HotbarIconProps) => {
   const { uid, title, src, material, active, className, source, disabled, onMenuOpen, onClick, children, ...rest } = props;
   const id = `hotbarIcon-${uid}`;
   const [menuOpen, setMenuOpen] = useState(false);
@@ -79,7 +80,7 @@ export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: Hotba
         {...rest}
         title={title}
         colorHash={`${title}-${source}`}
-        className={active ? "active" : "default"}
+        className={cssNames(active ? "active" : "default", { interactive: !!onClick })}
         width={size}
         height={size}
         src={src}
@@ -96,12 +97,11 @@ export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: Hotba
 
   return (
     <div className={cssNames("HotbarIcon flex", className, { disabled, contextMenuAvailable: menuItems.length > 0 })}>
-      <MaterialTooltip title={`${title || "unknown"} (${source || "unknown"})`} placement="right">
-        <div id={id}>
-          {renderIcon()}
-          {children}
-        </div>
-      </MaterialTooltip>
+      {tooltip && <Tooltip targetId={id}>{tooltip}</Tooltip>}
+      <div id={id}>
+        {renderIcon()}
+        {children}
+      </div>
       <Menu
         usePortal
         htmlFor={id}

src/renderer/components/hotbar/hotbar-menu.tsx

@@ -157,6 +157,7 @@ export class HotbarMenu extends React.Component<Props> {
                             uid={`hotbar-icon-${item.entity.uid}`}
                             title={item.entity.name}
                             source={item.entity.source}
+                            tooltip={`${item.entity.name} (${item.entity.source})`}
                             menuItems={[
                               {
                                 title: "Unpin from Hotbar",

src/renderer/components/hotbar/hotbar-selector.tsx

@@ -27,7 +27,7 @@ import { Hotbar, HotbarStore } from "../../../common/hotbar-store";
 import { CommandOverlay } from "../command-palette";
 import { HotbarSwitchCommand } from "./hotbar-switch-command";
 import { hotbarDisplayIndex } from "./hotbar-display-label";
-import { MaterialTooltip } from "../material-tooltip/material-tooltip";
+import { TooltipPosition } from "../tooltip";
 
 interface Props {
   hotbar: Hotbar;
@@ -40,14 +40,16 @@ export function HotbarSelector({ hotbar }: Props) {
     <div className="HotbarSelector flex align-center">
       <Icon material="play_arrow" className="previous box" onClick={() => store.switchToPrevious()} />
       <div className="box grow flex align-center">
-        <MaterialTooltip arrow title={hotbar.name}>
-          <Badge
-            id="hotbarIndex"
-            small
-            label={hotbarDisplayIndex(store.activeHotbarId)}
-            onClick={() => CommandOverlay.open(<HotbarSwitchCommand />)}
-          />
-        </MaterialTooltip>
+        <Badge
+          id="hotbarIndex"
+          small
+          label={hotbarDisplayIndex(store.activeHotbarId)}
+          onClick={() => CommandOverlay.open(<HotbarSwitchCommand />)}
+          tooltip={{
+            preferredPositions: [TooltipPosition.TOP, TooltipPosition.TOP_LEFT],
+            children: hotbar.name
+          }}
+        />
       </div>
       <Icon material="play_arrow" className="next box" onClick={() => store.switchToNext()} />
     </div>