35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { CiCircleInfo } from 'react-icons/ci'
|
|
|
|
interface TooltipProps {
|
|
content: string | React.ReactNode
|
|
}
|
|
|
|
const Tooltip = ({ content }: TooltipProps) => {
|
|
const [showTooltip, setShowTooltip] = useState(false)
|
|
|
|
return (
|
|
<div className="relative flex items-center overflow-visible">
|
|
<button
|
|
type="button"
|
|
className="text-orange hover:text-orange/80 focus:outline-none"
|
|
onMouseEnter={() => setShowTooltip(true)}
|
|
onMouseLeave={() => setShowTooltip(false)}
|
|
onClick={() => setShowTooltip(!showTooltip)}
|
|
>
|
|
<CiCircleInfo className="w-4 h-4" />
|
|
</button>
|
|
{showTooltip && (
|
|
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-4 py-2 bg-white rounded-xl text-center shadow-lg text-sm text-gray-700 w-max max-w-xs z-10">
|
|
{content}
|
|
<div className="absolute -bottom-2 left-1/2 -translate-x-1/2 w-2 h-2 bg-white transform rotate-45"></div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Tooltip
|