69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
import React, {ReactNode, useState, useRef, useEffect} from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
|
|
import './tooltip_wrapper.scss';
|
|
|
|
type TooltipWrapperProps = {
|
|
children: ReactNode;
|
|
tooltipContent: ReactNode;
|
|
}
|
|
|
|
const TooltipWrapper: React.FC<TooltipWrapperProps> = ({children, tooltipContent}) => {
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
const wrapperRef = useRef<HTMLDivElement>(null);
|
|
const tooltipRef = useRef<HTMLDivElement>(null);
|
|
const [position, setPosition] = useState({bottom: 0, left: 0});
|
|
|
|
const handleMouseEnter = () => setIsVisible(true);
|
|
const handleMouseLeave = () => setIsVisible(false);
|
|
|
|
useEffect(() => {
|
|
if (wrapperRef.current && isVisible) {
|
|
const wrapperRect = wrapperRef.current.getBoundingClientRect();
|
|
setPosition({
|
|
bottom: window.innerHeight - (wrapperRect.top + window.scrollY - 5),
|
|
left: wrapperRect.left + window.scrollX + wrapperRect.width / 2,
|
|
});
|
|
}
|
|
}, [isVisible]);
|
|
|
|
const tooltip = (
|
|
<div
|
|
ref={tooltipRef}
|
|
className='badge-tooltip'
|
|
style={{
|
|
position: 'absolute',
|
|
bottom: `${position.bottom}px`,
|
|
left: `${position.left}px`,
|
|
transform: 'translateX(-50%)',
|
|
visibility: isVisible ? 'visible' : 'hidden',
|
|
opacity: isVisible ? 1 : 0,
|
|
}}
|
|
>
|
|
{tooltipContent}
|
|
<div
|
|
className='badge-tooltip-arrow'
|
|
style={{
|
|
bottom: '-4px',
|
|
left: '50%',
|
|
marginLeft: '-4px',
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div
|
|
ref={wrapperRef}
|
|
className='badge-tooltip-wrapper'
|
|
onMouseEnter={handleMouseEnter}
|
|
onMouseLeave={handleMouseLeave}
|
|
>
|
|
{children}
|
|
{isVisible && ReactDOM.createPortal(tooltip as any, document.body)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TooltipWrapper;
|