2022-11-09 09:04:06 +00:00
|
|
|
import { InformationCircleIcon } from '@heroicons/react/24/solid'
|
2022-10-20 15:39:21 +00:00
|
|
|
import Tippy from '@tippyjs/react'
|
|
|
|
import { ReactNode } from 'react'
|
|
|
|
|
|
|
|
interface TooltipProps {
|
|
|
|
content: string | ReactNode
|
|
|
|
className?: string
|
|
|
|
}
|
|
|
|
|
|
|
|
const Tooltip = ({ content, className }: TooltipProps) => {
|
|
|
|
return (
|
|
|
|
<Tippy
|
|
|
|
appendTo={() => document.body}
|
2022-11-09 09:04:06 +00:00
|
|
|
className='rounded-md bg-[#ED512F] p-2 text-xs'
|
2022-10-20 15:39:21 +00:00
|
|
|
content={<span>{content}</span>}
|
|
|
|
interactive={true}
|
|
|
|
>
|
|
|
|
<InformationCircleIcon className={`w-5 cursor-pointer ${className}`} />
|
|
|
|
</Tippy>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Tooltip
|