diff --git a/src/renderer/components/+catalog/material-tooltip/material-tooltip.tsx b/src/renderer/components/+catalog/material-tooltip/material-tooltip.tsx
new file mode 100644
index 0000000000..bd10dde78c
--- /dev/null
+++ b/src/renderer/components/+catalog/material-tooltip/material-tooltip.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { makeStyles, Tooltip, TooltipProps } from "@material-ui/core";
+
+const useStyles = makeStyles(() => ({
+  arrow: {
+    color: "#18191c",
+  },
+  tooltip: {
+    fontSize: 12,
+    backgroundColor: "#18191c",
+    color: "#fff",
+    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
+};
+
diff --git a/src/renderer/components/hotbar/hotbar-selector.tsx b/src/renderer/components/hotbar/hotbar-selector.tsx
index d4919d7f0b..37ec884f80 100644
--- a/src/renderer/components/hotbar/hotbar-selector.tsx
+++ b/src/renderer/components/hotbar/hotbar-selector.tsx
@@ -2,43 +2,31 @@ import "./hotbar-selector.scss";
 import React from "react";
 import { Icon } from "../icon";
 import { Badge } from "../badge";
-import { makeStyles, Tooltip } from "@material-ui/core";
 import { Hotbar, HotbarStore } from "../../../common/hotbar-store";
 import { CommandOverlay } from "../command-palette";
 import { HotbarSwitchCommand } from "./hotbar-switch-command";
+import { MaterialTooltip } from "../+catalog/material-tooltip/material-tooltip";
 
 interface Props {
   hotbar: Hotbar;
 }
 
-const useStyles = makeStyles(() => ({
-  arrow: {
-    color: "#222",
-  },
-  tooltip: {
-    fontSize: 12,
-    backgroundColor: "#222",
-  },
-}));
-
-
 export function HotbarSelector({ hotbar }: Props) {
   const store = HotbarStore.getInstance();
   const activeIndexDisplay = store.activeHotbarIndex + 1;
-  const classes = useStyles();
 
   return (
     <div className="HotbarSelector flex align-center">
       <Icon material="play_arrow" className="previous box" onClick={() => store.switchToPrevious()} />
       <div className="box grow flex align-center">
-        <Tooltip arrow title={hotbar.name} classes={classes}>
+        <MaterialTooltip arrow title={hotbar.name}>
           <Badge
             id="hotbarIndex"
             small
             label={activeIndexDisplay}
             onClick={() => CommandOverlay.open(<HotbarSwitchCommand />)}
           />
-        </Tooltip>
+        </MaterialTooltip>
       </div>
       <Icon material="play_arrow" className="next box" onClick={() => store.switchToNext()} />
     </div>