tharikida-ui
Version:
A modern, lightweight React UI component library with built-in theming, accessibility, and full TypeScript support. Create beautiful, responsive, and customizable web apps faster with ready-to-use components for any project.
69 lines (68 loc) • 3.05 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from "react";
import { useTheme } from "../../theme/ThemeProvider";
const Tooltip = ({ content, children, position = "top", styles = {}, className = "", transitionDuration = 180, }) => {
const theme = useTheme();
const [visible, setVisible] = useState(false);
const [show, setShow] = useState(false);
const [shouldAnimate, setShouldAnimate] = useState(false);
useEffect(() => {
if (visible) {
setShow(true);
setTimeout(() => setShouldAnimate(true), 10);
}
else {
setShouldAnimate(false);
const timeout = setTimeout(() => setShow(false), transitionDuration);
return () => clearTimeout(timeout);
}
}, [visible, transitionDuration]);
const getPositionStyle = () => {
switch (position) {
case "bottom":
return { top: "100%", left: "50%", marginTop: 8 };
case "left":
return { right: "100%", top: "50%", marginRight: 8 };
case "right":
return { left: "100%", top: "50%", marginLeft: 8 };
case "top":
default:
return { bottom: "100%", left: "50%", marginBottom: 8 };
}
};
const getTransform = () => {
switch (position) {
case "top":
case "bottom":
return "translate(-50%, 0)";
case "left":
case "right":
return "translate(0, -50%)";
default:
return "translate(-50%, 0)";
}
};
return (_jsxs("span", { style: { position: "relative", display: "inline-block" }, className: className, onMouseEnter: () => setVisible(true), onMouseLeave: () => setVisible(false), onFocus: () => setVisible(true), onBlur: () => setVisible(false), tabIndex: 0, children: [children, show && (_jsx("span", { style: {
position: "absolute",
zIndex: 999,
background: theme.backgroundColor,
color: theme.textColor,
border: `1px solid ${theme.borderColor}`,
borderRadius: theme.spacingfactor,
padding: `${theme.spacingfactor}px ${theme.spacingfactor * 2}px`,
fontFamily: theme.fontFamily,
fontSize: theme.fontSize * 0.8,
minWidth: 0,
maxWidth: 220,
boxShadow: `1px 1px 0px ${theme.shadowColor}`,
whiteSpace: "nowrap",
pointerEvents: "none",
opacity: shouldAnimate ? 1 : 0,
transform: getTransform(),
transition: `opacity ${transitionDuration}ms ease, transform ${transitionDuration}ms ease`,
...getPositionStyle(),
...styles,
}, children: content }))] }));
};
export default Tooltip;