Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | 3x 3x 3x 3x 3x | /* eslint-disable react/prop-types */
import { useState } from "react";
export default function FooterTooltip({ triggerContent, tooltipContent }) {
const [isHidden, setIsHidden] = useState(true);
const tooltipButtonStyles = {
position: "relative",
background: "transparent",
border: "none",
display: "inline-block",
};
const triangleStyles = {
position: "absolute",
top: "100%",
left: "50%",
translate: "-50% 0",
border: "6px solid transparent",
borderTop: "6px solid rgb(51,51,51)",
width: "6px",
height: "6px",
};
const tooltipStyles = isHidden
? {
display: "none",
}
: {
position: "absolute",
bottom: "calc(100% + 6px)",
left: "50%",
width: "300px",
padding: "8px",
borderRadius: "4px",
fontSize: "0.9rem",
backgroundColor: "rgb(51,51,51)",
color: "rgb(255,255,255)",
maxWidth: "max-content",
translate: "-50% 0",
};
return (
<span className="qpp-tooltip-wrapper" style={{ position: "relative" }}>
<button
role="tooltip"
className="qpp-tooltip"
type="button"
style={tooltipButtonStyles}
onMouseEnter={() => setIsHidden(false)}
onMouseLeave={() => setIsHidden(true)}
onFocus={() => setIsHidden(false)}
onBlur={() => setIsHidden(true)}
>
{triggerContent}
<span style={tooltipStyles}>
{tooltipContent}
<div style={triangleStyles} />
</span>
</button>
</span>
);
}
|