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/+catalog/catalog.tsx

@@ -179,7 +179,6 @@ export class Catalog extends React.Component<Props> {
         src={item.entity.spec.icon?.src}
         material={item.entity.spec.icon?.material}
         background={item.entity.spec.icon?.background}
-        onClick={() => this.onDetails(item)}
         size={24}
       />
     );

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,20 @@
  * 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";
+import { TooltipPosition } from "../tooltip";
 
 interface Props extends RouteComponentProps<ClusterViewRouteParams> {
 }
@@ -43,11 +44,17 @@ 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={{
+            preferredPositions: TooltipPosition.BOTTOM_RIGHT,
+            children: "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

@@ -72,9 +72,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,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">
+      {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

@@ -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
-          <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/material-tooltip/material-tooltip.tsx

@@ -1,48 +0,0 @@
-/**
- * Copyright (c) 2021 OpenLens Authors
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of
- * this software and associated documentation files (the "Software"), to deal in
- * the Software without restriction, including without limitation the rights to
- * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
- * the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
- * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
- * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
- * 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 React from "react";
-import { makeStyles, Tooltip, TooltipProps } from "@material-ui/core";
-
-const useStyles = makeStyles(() => ({
-  arrow: {
-    color: "var(--tooltipBackground)",
-  },
-  tooltip: {
-    fontSize: 12,
-    backgroundColor: "var(--tooltipBackground)",
-    color: "var(--textColorAccent)",
-    padding: 8,
-    boxShadow: "0 8px 16px rgba(0,0,0,0.24)"
-  },
-}));
-
-export function MaterialTooltip(props: TooltipProps) {
-  const classes = useStyles();
-
-  return (
-    <Tooltip classes={classes} {...props}/>
-  );
-}
-
-MaterialTooltip.defaultProps = {
-  arrow: true
-};
-

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 = (