Removing MaterialTooltip references

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

src/renderer/components/+extensions/install.tsx

@@ -29,7 +29,6 @@ import { SubTitle } from "../layout/sub-title";
 import { TooltipPosition } from "../tooltip";
 import { ExtensionInstallationStateStore } from "./extension-install.store";
 import { observer } from "mobx-react";
-import { MaterialTooltip } from "../material-tooltip/material-tooltip";
 
 interface Props {
   installPath: string;
@@ -71,13 +70,12 @@ export const Install = observer((props: Props) => {
             onChange={onChange}
             onSubmit={installFromInput}
             iconRight={
-              <MaterialTooltip title="Browse">
+              <Icon
-                <Icon
+                className={styles.icon}
-                  className={styles.icon}
+                material="folder_open"
-                  material="folder_open"
+                onClick={prevDefault(installFromSelectFileDialog)}
-                  onClick={prevDefault(installFromSelectFileDialog)}
+                tooltip="Browse"
-                />
+              />
-              </MaterialTooltip>
             }
           />
         </div>

src/renderer/components/cluster-manager/catalog-topbar.tsx

@@ -24,15 +24,17 @@ import { welcomeURL } from "../../../common/routes";
 import { navigate } from "../../navigation";
 import { Icon } from "../icon";
 import { TopBar } from "../layout/topbar";
-import { MaterialTooltip } from "../material-tooltip/material-tooltip";
 
 export function CatalogTopbar() {
   return (
     <TopBar label="Catalog">
       <div>
-        <MaterialTooltip title="Close Catalog" placement="left">
+        <Icon
-          <Icon style={{ cursor: "default" }} material="close" onClick={() => navigate(welcomeURL())}/>
+          style={{ cursor: "default" }}
-        </MaterialTooltip>
+          material="close"
+          onClick={() => navigate(welcomeURL())}
+          tooltip="Close Catalog"
+        />
       </div>
     </TopBar>
   );

src/renderer/components/cluster-manager/cluster-topbar.tsx

@@ -18,19 +18,19 @@
  * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
-
 import { observer } from "mobx-react";
 import React from "react";
-import type { RouteComponentProps } from "react-router";
+
+import { previousActiveTab } from "../+catalog";
+import { ClusterStore } from "../../../common/cluster-store";
 import { catalogURL } from "../../../common/routes";
 import { navigate } from "../../navigation";
 import { Icon } from "../icon";
 import { TopBar } from "../layout/topbar";
-import { MaterialTooltip } from "../material-tooltip/material-tooltip";
+
-import type { Cluster } from "../../../main/cluster";
+import type { RouteComponentProps } from "react-router";
-import { ClusterStore } from "../../../common/cluster-store";
 import type { ClusterViewRouteParams } from "../../../common/routes";
-import { previousActiveTab } from "../+catalog";
+import type { Cluster } from "../../../main/cluster";
 
 interface Props extends RouteComponentProps<ClusterViewRouteParams> {
 }
@@ -43,11 +43,14 @@ export const ClusterTopbar = observer((props: Props) => {
   return (
     <TopBar label={getCluster()?.name}>
       <div>
-        <MaterialTooltip title="Back to Catalog" placement="left">
+        <Icon
-          <Icon style={{ cursor: "default" }} material="close" onClick={() => {
+          style={{ cursor: "default" }}
+          material="close"
+          onClick={() => {
             navigate(`${catalogURL()}/${previousActiveTab.get()}`);
-          }}/>
+          }}
-        </MaterialTooltip>
+          tooltip="Back to Catalog"
+        />
       </div>
     </TopBar>
   );

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

@@ -68,9 +68,11 @@
       box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
     }
 
-    &:hover {
+    &.interactive {
-      &:not(.active) {
+      &:hover {
-        box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff50;
+        &: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,8 @@ export interface HotbarIconProps extends DOMAttributes<HTMLElement> {
   disabled?: boolean;
   size?: number;
   background?: string;
+  interactive?: boolean;
+  tooltip?: string;
 }
 
 function onMenuItemClick(menuItem: CatalogEntityContextMenu) {
@@ -64,7 +66,7 @@ function onMenuItemClick(menuItem: CatalogEntityContextMenu) {
   }
 }
 
-export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: HotbarIconProps) => {
+export const HotbarIcon = observer(({menuItems = [], size = 40, interactive = true, 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 +81,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 })}
         width={size}
         height={size}
         src={src}
@@ -96,12 +98,11 @@ export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: Hotba
 
   return (
     <div className={cssNames("HotbarIcon flex", className, { disabled })}>
-      <MaterialTooltip title={`${title || "unknown"} (${source || "unknown"})`} placement="right">
+      {tooltip && <Tooltip targetId={id}>{tooltip}</Tooltip>}
-        <div id={id}>
+      <div id={id}>
-          {renderIcon()}
+        {renderIcon()}
-          {children}
+        {children}
-        </div>
+      </div>
-      </MaterialTooltip>
       <Menu
         usePortal
         htmlFor={id}

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

@@ -164,6 +164,7 @@ export class HotbarMenu extends React.Component<Props> {
                             title={item.entity.name}
                             source={item.entity.source}
                             menuItems={disabledMenuItems}
+                            tooltip={`${item.entity.name} (${item.entity.source})`}
                             disabled
                             size={40}
                           />

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
-          <Badge
+          id="hotbarIndex"
-            id="hotbarIndex"
+          small
-            small
+          label={hotbarDisplayIndex(store.activeHotbarId)}
-            label={hotbarDisplayIndex(store.activeHotbarId)}
+          onClick={() => CommandOverlay.open(<HotbarSwitchCommand />)}
-            onClick={() => CommandOverlay.open(<HotbarSwitchCommand />)}
+          tooltip={{
-          />
+            preferredPositions: [TooltipPosition.TOP, TooltipPosition.TOP_LEFT],
-        </MaterialTooltip>
+            children: hotbar.name
+          }}
+        />
       </div>
       <Icon material="play_arrow" className="next box" onClick={() => store.switchToNext()} />
     </div>

src/renderer/components/tooltip/tooltip.scss

@@ -23,7 +23,7 @@
 .Tooltip {
   --bgc: #{$mainBackground};
   --radius: #{$radius};
-  --color: #{$textColorSecondary};
+  --color: #{$textColorAccent};
   --border: 1px solid #{$borderColor};
 
   // use positioning relative to viewport (window)
@@ -33,17 +33,18 @@
   background: var(--bgc);
   font-size: small;
   font-weight: normal;
-  border: var(--border);
   border-radius: var(--radius);
   color: var(--color);
   white-space: normal;
   padding: .5em;
   text-align: center;
   pointer-events: none;
-  transition: opacity 150ms 25ms ease-in-out;
+  transition: opacity 150ms 150ms ease-in-out;
   z-index: 100000;
+  opacity: 1;
+  box-shadow: 0 8px 16px rgba(0,0,0,0.24);
 
-  &.hidden {
+  &.invisible {
     left: 0;
     top: 0;
     opacity: 0;

src/renderer/components/tooltip/tooltip.tsx

@@ -228,7 +228,7 @@ export class Tooltip extends React.Component<TooltipProps> {
   render() {
     const { style, formatters, usePortal, children } = this.props;
     const className = cssNames("Tooltip", this.props.className, formatters, this.activePosition, {
-      hidden: !this.isVisible,
+      invisible: !this.isVisible,
       formatter: !!formatters,
     });
     const tooltip = (