205e1f0580
solve partially this ticket : https://app.ora.pm/p/fb56ed95daa7456b888d266a050b9afa?v=86662&s=28293&t=k&c=657791f3b1c64e6cbbf22f9378c0bdae --------- Co-authored-by: OxSaitama <arnaud.daubernatali@smart-chain.fr> Co-authored-by: Massi <massi.hamidouche@smart-chain.fr>
42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import classNames from "classnames";
|
|
import React, { ReactNode } from "react";
|
|
import classes from "./classes.module.scss";
|
|
|
|
type IProps = {
|
|
display: boolean;
|
|
title?: React.ReactNode;
|
|
event: React.MouseEvent<HTMLElement> | null;
|
|
children?: ReactNode;
|
|
};
|
|
|
|
export default class TooltipContent extends React.Component<IProps> {
|
|
public override render(): JSX.Element {
|
|
const mousePositionX = this.props.event?.clientX;
|
|
const mousePositionY = this.props.event?.clientY;
|
|
let right = 0;
|
|
let bottom = 0;
|
|
if (typeof window !== "undefined") {
|
|
right = window.innerWidth - (mousePositionX ?? 0) - 35;
|
|
bottom = window.innerHeight - (mousePositionY ?? 0) + 15;
|
|
}
|
|
return (
|
|
<div
|
|
style={{ bottom: bottom + "px", right: right + "px" }}
|
|
className={classNames(classes["root"], { [classes["show"]!]: this.props.display })}>
|
|
<div className={classes["root-content"]}>
|
|
{this.props.title && <div>{this.props.title}</div>}
|
|
{this.props.children}
|
|
</div>
|
|
<svg
|
|
className={classes["carrot"]}
|
|
width="25"
|
|
height="15"
|
|
viewBox="0 0 25 15"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12.5 14.4231L1.26091e-06 4.49015e-06L25 6.67572e-06L12.5 14.4231Z" />
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|
|
} |