@penaprieto/design-system
Version:
Multi-brand React design system with design tokens from Figma
28 lines (27 loc) • 1.41 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tooltip = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
require("./Tooltip.css");
const Icon_1 = require("../Icon");
const Tooltip = ({ content, placement = 'top', icon, children, className = '', }) => {
const [isVisible, setIsVisible] = (0, react_1.useState)(false);
const wrapperRef = (0, react_1.useRef)(null);
const handleMouseEnter = () => {
setIsVisible(true);
};
const handleMouseLeave = () => {
setIsVisible(false);
};
const tooltipClassName = [
'ds-tooltip',
`ds-tooltip--${placement}`,
isVisible && 'ds-tooltip--visible',
className,
]
.filter(Boolean)
.join(' ');
return ((0, jsx_runtime_1.jsxs)("div", { ref: wrapperRef, className: "ds-tooltip-wrapper", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [children, (0, jsx_runtime_1.jsxs)("div", { className: tooltipClassName, role: "tooltip", children: [icon && ((0, jsx_runtime_1.jsx)("div", { className: "ds-tooltip__icon", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: 12 }) })), (0, jsx_runtime_1.jsx)("span", { className: "ds-tooltip__text", children: content }), (0, jsx_runtime_1.jsx)("div", { className: "ds-tooltip__beak" })] })] }));
};
exports.Tooltip = Tooltip;