mirror of https://github.com/mue/mue.git
44 lines
1.1 KiB
JavaScript
44 lines
1.1 KiB
JavaScript
import { useState, memo } from 'react';
|
|
import { useFloating, flip, offset, shift } from '@floating-ui/react-dom';
|
|
import './tooltip.scss';
|
|
|
|
function Tooltip({ children, title, style, placement, subtitle }) {
|
|
const [showTooltip, setShowTooltip] = useState(false);
|
|
const { x, y, reference, floating, strategy } = useFloating({
|
|
placement: placement || 'bottom',
|
|
middleware: [flip(), offset(15), shift()],
|
|
});
|
|
|
|
return (
|
|
<div
|
|
className="tooltip"
|
|
style={style}
|
|
onMouseEnter={() => setShowTooltip(true)}
|
|
onMouseLeave={() => setShowTooltip(false)}
|
|
onFocus={() => setShowTooltip(true)}
|
|
onBlur={() => setShowTooltip(false)}
|
|
ref={reference}
|
|
>
|
|
{children}
|
|
{showTooltip && (
|
|
<span
|
|
ref={floating}
|
|
style={{
|
|
position: strategy,
|
|
top: y ?? '',
|
|
left: x ?? '',
|
|
display: 'flex',
|
|
flexFlow: 'column',
|
|
}}
|
|
className="tooltipTitle"
|
|
>
|
|
{title}
|
|
<span style={{ fontSize: '8px' }}>{subtitle}</span>
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default memo(Tooltip);
|