@seasketch/geoprocessing
Version:
Geoprocessing and reporting framework for SeaSketch 2.0
59 lines • 2.29 kB
JavaScript
import React, { useState, useRef } from "react";
import { styled } from "styled-components";
import { usePopper } from "react-popper";
export const TooltipContainer = styled.div `
visibility: ${({ $visible }) => ($visible ? "visible" : "hidden")};
max-width: 200px;
flex-direction: column;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
font-size: 12px;
font-weight: normal;
`;
export const TooltipTrigger = styled.button `
border: none;
background: none;
font-weight: inherit;
font-size: inherit;
color: inherit;
`;
export const TooltipItem = styled.div `
text-align: center;
padding: 5px;
`;
export const Tooltip = ({ children, placement = "auto", offset = { horizontal: 0, vertical: 0 }, text, width = 200, }) => {
const [isVisible, setIsVisible] = useState(false);
/** Used for updates */
const referenceRef = useRef(null);
const popperRef = useRef(null);
const { horizontal, vertical } = offset;
const { styles, attributes } = usePopper(referenceRef.current, popperRef.current, {
placement,
modifiers: [
{
name: "offset",
enabled: true,
options: {
offset: [horizontal, vertical],
},
},
],
});
const handleMouseEnter = () => {
setIsVisible(true);
if (popperRef.current)
popperRef.current.style.zIndex = "100";
};
const handleMouseLeave = () => {
setIsVisible(false);
if (popperRef.current)
popperRef.current.style.zIndex = "-100";
};
return (React.createElement(React.Fragment, null,
React.createElement(TooltipTrigger, { ref: referenceRef, style: children.props.style, onMouseOver: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleMouseEnter, onBlur: handleMouseLeave, "aria-label": `Tooltip: ${text}` }, children),
React.createElement("div", { ref: popperRef, style: { zIndex: -100, ...styles.popper }, ...attributes.popper },
React.createElement(TooltipContainer, { style: { ...styles.offset, width: width }, "$visible": isVisible },
React.createElement(TooltipItem, null, text)))));
};
//# sourceMappingURL=Tooltip.js.map