46 lines
1.1 KiB
React
46 lines
1.1 KiB
React
import "./tooltipWithTail.css";
|
|
import React from "react";
|
|
import { styled } from "@mui/material/styles";
|
|
import Tooltip, { tooltipClasses } from "@mui/material/Tooltip";
|
|
import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
|
|
|
|
const CustomizedTooltip = styled(
|
|
({ className, placement, arrow, ...props }) => (
|
|
<Tooltip
|
|
{...props}
|
|
placement={placement}
|
|
arrow={arrow}
|
|
classes={{ popper: className }}
|
|
/>
|
|
)
|
|
)(({ theme }) => ({
|
|
[`& .${tooltipClasses.tooltip}`]: {
|
|
backgroundColor: "black",
|
|
},
|
|
[`& .${tooltipClasses.arrow}`]: {
|
|
color: "black",
|
|
},
|
|
}));
|
|
|
|
function TooltipWithTail({ placement, arrow = false, title, text }) {
|
|
return (
|
|
<div>
|
|
<CustomizedTooltip
|
|
arrow={arrow}
|
|
placement={placement}
|
|
title={
|
|
<React.Fragment>
|
|
{title && <div className="tooltip-title">{title}</div>}
|
|
<div className="tooltip-description">{text}</div>
|
|
</React.Fragment>
|
|
}
|
|
className="tooltip-holder"
|
|
>
|
|
<HelpOutlineIcon style={{ fill: "#98A2B3" }} />
|
|
</CustomizedTooltip>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default TooltipWithTail;
|