52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
import ToolTipIcon from "@Assets/Icons/tool-tip.svg";
|
|
import styled from "@emotion/styled";
|
|
import TooltipMUI, { tooltipClasses, TooltipProps } from "@mui/material/Tooltip";
|
|
import Image from "next/image";
|
|
import React from "react";
|
|
|
|
type IProps = {
|
|
title?: string | JSX.Element;
|
|
text?: string | JSX.Element;
|
|
className?: string;
|
|
isNotFlex?: boolean;
|
|
};
|
|
|
|
type IState = {
|
|
showContent: boolean;
|
|
event: React.MouseEvent<HTMLElement> | null;
|
|
};
|
|
|
|
const LightTooltip = styled(({ className, ...props }: TooltipProps) => <TooltipMUI {...props} classes={{ popper: className }} />)(
|
|
({ theme }) => ({
|
|
[`& .${tooltipClasses.tooltip}`]: {
|
|
backgroundColor: "var(--turquoise-flash)",
|
|
color: "white",
|
|
//boxShadow: theme.shadows[1],
|
|
fontSize: 11,
|
|
},
|
|
[`& .${tooltipClasses.arrow}`]: {
|
|
color: "var(--turquoise-flash)",
|
|
},
|
|
}),
|
|
);
|
|
|
|
export default class Tooltip extends React.Component<IProps, IState> {
|
|
static defaultProps: Partial<IProps> = {
|
|
isNotFlex: false,
|
|
};
|
|
|
|
public constructor(props: IProps) {
|
|
super(props);
|
|
}
|
|
|
|
public override render(): JSX.Element {
|
|
return (
|
|
<LightTooltip title={this.props.text} placement="top" arrow>
|
|
<span className={this.props.className} style={!this.props.isNotFlex ? { display: "flex" } : {}}>
|
|
<Image src={ToolTipIcon} alt="toolTip icon" />
|
|
</span>
|
|
</LightTooltip>
|
|
);
|
|
}
|
|
}
|