46 lines
1.4 KiB
React
46 lines
1.4 KiB
React
import React from "react";
|
|
|
|
/**
|
|
* Hover tooltip. Wraps a trigger; shows a small dark label.
|
|
*/
|
|
export function Tooltip({ label, placement = "top", children, style = {} }) {
|
|
const [show, setShow] = React.useState(false);
|
|
const pos = {
|
|
top: { bottom: "calc(100% + 7px)", left: "50%", transform: "translateX(-50%)" },
|
|
bottom: { top: "calc(100% + 7px)", left: "50%", transform: "translateX(-50%)" },
|
|
left: { right: "calc(100% + 7px)", top: "50%", transform: "translateY(-50%)" },
|
|
right: { left: "calc(100% + 7px)", top: "50%", transform: "translateY(-50%)" },
|
|
}[placement];
|
|
|
|
return (
|
|
<span
|
|
onMouseEnter={() => setShow(true)}
|
|
onMouseLeave={() => setShow(false)}
|
|
style={{ position: "relative", display: "inline-flex", ...style }}
|
|
>
|
|
{children}
|
|
{show && label && (
|
|
<span
|
|
role="tooltip"
|
|
style={{
|
|
position: "absolute",
|
|
zIndex: 50,
|
|
...pos,
|
|
padding: "5px 9px",
|
|
borderRadius: "var(--radius-sm)",
|
|
background: "var(--ctv-surface-3)",
|
|
border: "1px solid var(--border-control)",
|
|
boxShadow: "var(--shadow-pop)",
|
|
color: "var(--text-primary)",
|
|
font: "var(--weight-medium) var(--text-xs)/1.2 var(--font-sans)",
|
|
whiteSpace: "nowrap",
|
|
pointerEvents: "none",
|
|
}}
|
|
>
|
|
{label}
|
|
</span>
|
|
)}
|
|
</span>
|
|
);
|
|
}
|