90 lines
2.4 KiB
JavaScript
90 lines
2.4 KiB
JavaScript
import React, { useState } from 'react';
|
|
import Transition from '../utils/Transition';
|
|
|
|
function Tooltip({
|
|
children,
|
|
className,
|
|
bg,
|
|
size,
|
|
position,
|
|
}) {
|
|
|
|
const [tooltipOpen, setTooltipOpen] = useState(false);
|
|
|
|
const positionOuterClasses = (position) => {
|
|
switch (position) {
|
|
case 'right':
|
|
return 'left-full top-1/2 transform -translate-y-1/2';
|
|
case 'left':
|
|
return 'right-full top-1/2 transform -translate-y-1/2';
|
|
case 'bottom':
|
|
return 'top-full left-1/2 transform -translate-x-1/2';
|
|
default:
|
|
return 'bottom-full left-1/2 transform -translate-x-1/2';
|
|
}
|
|
}
|
|
|
|
const sizeClasses = (size) => {
|
|
switch (size) {
|
|
case 'lg':
|
|
return 'min-w-72 p-3';
|
|
case 'md':
|
|
return 'min-w-56 p-3';
|
|
case 'sm':
|
|
return 'min-w-44 p-2';
|
|
default:
|
|
return 'p-2';
|
|
}
|
|
};
|
|
|
|
const positionInnerClasses = (position) => {
|
|
switch (position) {
|
|
case 'right':
|
|
return 'ml-2';
|
|
case 'left':
|
|
return 'mr-2';
|
|
case 'bottom':
|
|
return 'mt-2';
|
|
default:
|
|
return 'mb-2';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`relative ${className}`}
|
|
onMouseEnter={() => setTooltipOpen(true)}
|
|
onMouseLeave={() => setTooltipOpen(false)}
|
|
onFocus={() => setTooltipOpen(true)}
|
|
onBlur={() => setTooltipOpen(false)}
|
|
>
|
|
<button
|
|
className="block"
|
|
aria-haspopup="true"
|
|
aria-expanded={tooltipOpen}
|
|
onClick={(e) => e.preventDefault()}
|
|
>
|
|
<svg className="w-4 h-4 fill-current text-slate-400" viewBox="0 0 16 16">
|
|
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z" />
|
|
</svg>
|
|
</button>
|
|
<div className={`z-10 absolute ${positionOuterClasses(position)}`}>
|
|
<Transition
|
|
show={tooltipOpen}
|
|
tag="div"
|
|
className={`rounded overflow-hidden ${bg === 'dark' ? 'bg-slate-800' : 'bg-white border border-slate-200 shadow-lg'} ${sizeClasses(size)} ${positionInnerClasses(position)}`}
|
|
enter="transition ease-out duration-200 transform"
|
|
enterStart="opacity-0 -translate-y-2"
|
|
enterEnd="opacity-100 translate-y-0"
|
|
leave="transition ease-out duration-200"
|
|
leaveStart="opacity-100"
|
|
leaveEnd="opacity-0"
|
|
>
|
|
{children}
|
|
</Transition>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Tooltip; |