olemorud/react-befunge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make tooltip less obstructive

Browse Source
This commit is contained in:
Ole Morud
2022-08-25 19:32:44 +02:00
parent 2cf821729b
commit 75029d0fde
1 changed files with 4 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/InstructionMenu.tsx
View File

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