You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
37 lines
857 B
37 lines
857 B
2 years ago
|
import { usePopperTooltip } from 'react-popper-tooltip';
|
||
|
import type { Config } from 'react-popper-tooltip';
|
||
|
|
||
|
type TooltipProps = {
|
||
|
content: React.ReactNode;
|
||
|
children: React.ReactNode;
|
||
|
tooltipConfig?: Config;
|
||
|
};
|
||
|
|
||
|
const Tooltip = ({ children, content, tooltipConfig }: TooltipProps) => {
|
||
|
const { getTooltipProps, setTooltipRef, setTriggerRef, visible } =
|
||
|
usePopperTooltip({
|
||
|
followCursor: true,
|
||
|
placement: 'left-end',
|
||
|
...tooltipConfig,
|
||
|
});
|
||
|
|
||
|
return (
|
||
|
<>
|
||
|
<div ref={setTriggerRef}>{children}</div>
|
||
|
{visible && (
|
||
|
<div
|
||
|
ref={setTooltipRef}
|
||
|
{...getTooltipProps({
|
||
|
className:
|
||
|
'bg-gray-800 px-2 py-1 rounded border border-gray-600 shadow text-gray-100',
|
||
|
})}
|
||
|
>
|
||
|
{content}
|
||
|
</div>
|
||
|
)}
|
||
|
</>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default Tooltip;
|