@kadconsulting/dry
Version:
KAD Reusable Component Library
96 lines • 3.9 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useState } from 'react';
import './Tooltip.scss'; // Import CSS file for styling
const Tooltip = forwardRef(({ title, text, children, position = 'top', tooltipOn = false, useMouseOver = true, }) => {
const [showTooltip, setShowTooltip] = useState(tooltipOn);
const handleMouseEnter = () => {
setShowTooltip(true);
};
const handleMouseLeave = () => {
setShowTooltip(false);
};
const getTooltipPosition = () => {
switch (position) {
case 'top':
return {
bottom: 'calc(100% + 8px)',
left: '50%',
transform: 'translateX(-50%)',
};
case 'right':
return {
top: '50%',
left: 'calc(100% + 8px)',
transform: 'translateY(-50%)',
};
case 'bottom':
return {
top: 'calc(100% + 8px)',
left: '50%',
transform: 'translateX(-50%)',
};
case 'left':
return {
top: '50%',
right: 'calc(100% + 8px)',
transform: 'translateY(-50%)',
};
default:
return {
bottom: 'calc(100% + 8px)',
left: '50%',
transform: 'translateX(-50%)',
};
}
};
const getArrowStyles = () => {
switch (position) {
case 'top':
return {
bottom: '-5px',
left: '50%',
marginLeft: '-5px',
borderWidth: '5px 5px 0',
borderTopColor: '#000',
};
case 'right':
return {
top: '50%',
left: '-5px',
marginTop: '-5px',
borderWidth: '5px 5px 5px 0',
borderRightColor: '#000',
};
case 'bottom':
return {
top: '-5px',
left: '50%',
marginLeft: '-5px',
borderWidth: '0 5px 5px',
borderBottomColor: '#000',
};
case 'left':
return {
top: '50%',
right: '-5px',
marginTop: '-5px',
borderWidth: '5px 0 5px 5px',
borderLeftColor: '#000',
};
default:
return {
top: '-5px',
left: '50%',
marginLeft: '-5px',
borderWidth: '5px 5px 0',
borderBottomColor: '#000',
};
}
};
if (useMouseOver) {
return (_jsxs("div", { className: 'tooltip-container', onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [children, showTooltip && (_jsxs("div", { className: 'tooltip', style: getTooltipPosition(), children: [_jsx("div", { className: 'arrow', style: getArrowStyles() }), _jsxs("div", { className: 'tooltip-content', children: [_jsx("p", { children: title }), _jsx("p", { children: text })] })] }))] }));
}
return (_jsxs("div", { className: 'tooltip-container', children: [children, showTooltip && (_jsxs("div", { className: 'tooltip', style: getTooltipPosition(), children: [_jsx("div", { className: 'arrow', style: getArrowStyles() }), _jsxs("div", { className: 'tooltip-content', children: [_jsx("p", { children: title }), _jsx("p", { children: text })] })] }))] }));
});
export default Tooltip;
//# sourceMappingURL=Tooltip.js.map