57 lines
1.6 KiB
JavaScript
57 lines
1.6 KiB
JavaScript
import { Box, Popper, Typography } from "@mui/material";
|
|
import { ReactElement, useState } from "react";
|
|
import Paper from "../Paper/Paper";
|
|
|
|
const Tooltip = ({ message, children }) => {
|
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
|
|
const handlePopoverOpen = (event) => {
|
|
setAnchorEl(event.currentTarget);
|
|
};
|
|
|
|
const handlePopoverClose = () => {
|
|
setAnchorEl(null);
|
|
};
|
|
|
|
const open = Boolean(anchorEl);
|
|
const id = open ? undefined : "info-tooltip";
|
|
|
|
return (
|
|
<Box
|
|
style={{
|
|
display: "inline-flex",
|
|
justifyContent: "center",
|
|
alignSelf: "center",
|
|
}}
|
|
onMouseEnter={handlePopoverOpen}
|
|
onMouseLeave={handlePopoverClose}
|
|
>
|
|
{children}
|
|
<Popper
|
|
id={id}
|
|
open={open}
|
|
anchorEl={anchorEl}
|
|
placement="bottom"
|
|
className="tooltip"
|
|
nonce={undefined}
|
|
onResize={undefined}
|
|
onResizeCapture={undefined}
|
|
slotProps={undefined}
|
|
slots={undefined}
|
|
>
|
|
<Paper style={{ boxShadow: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px" }} className="info-tooltip">
|
|
{typeof message === "string" ? (
|
|
<Typography variant="body1" className="info-tooltip-text">
|
|
{message}
|
|
</Typography>
|
|
) : (
|
|
<>{message}</>
|
|
)}
|
|
</Paper>
|
|
</Popper>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default Tooltip;
|