From 75029d0fde5bd3ddd9b6c6077e060edb0e4613ee Mon Sep 17 00:00:00 2001
From: Ole Morud <olekr99@hotmail.com>
Date: Thu, 25 Aug 2022 19:32:44 +0200
Subject: [PATCH] make tooltip less obstructive

---
 src/components/InstructionMenu.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/InstructionMenu.tsx b/src/components/InstructionMenu.tsx
index 71d25a3..1160910 100644
--- a/src/components/InstructionMenu.tsx
+++ b/src/components/InstructionMenu.tsx
@@ -8,6 +8,7 @@ const HtmlTooltip = styled(({ className, ...props }: TooltipProps) => (
   <Tooltip {...props} classes={{ popper: className }} />
 ))(({ theme }) => ({
   [`& .${tooltipClasses.tooltip}`]: {
+    placement: "right",
     backgroundColor: "#f5f5f9",
     color: "rgba(0, 0, 0, 0.87)",
     maxWidth: 220,
@@ -49,6 +50,8 @@ export default function InstructionMenu() {
           return (
             <Grid item key={key++} xs={1}>
               <HtmlTooltip
+                placement="right"
+                disableInteractive
                 key={key++}
                 title={
                   <>
@@ -59,7 +62,7 @@ export default function InstructionMenu() {
                 <div draggable="true" onDragStart={(event) => handleDragStart(instruction, event)}>
                   <Card key={key++} sx={{ height: "3rem", width: "3rem" }}>
                     <CardContent>
-                      <Typography sx={{ userSelect: "none" }}>{instruction.symbol}</Typography>
+                      <Typography sx={{ userSelect: "none" }}>{instruction.emoji}</Typography>
                     </CardContent>
                   </Card>
                 </div>