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
import type { Config } from 'react-popper-tooltip';
|
|
import { usePopperTooltip } 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;
|