27 lines
747 B
TypeScript
27 lines
747 B
TypeScript
|
import { createPortal } from 'react-dom'
|
||
|
|
import './styles/EphemeralTooltip.css'
|
||
|
|
|
||
|
|
interface PropsForEphemeralTooltip {
|
||
|
|
forId: string
|
||
|
|
message: string
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function EphemeralTooltip({ forId, message }: PropsForEphemeralTooltip) {
|
||
|
|
const rect = document.getElementById(forId)?.getBoundingClientRect()
|
||
|
|
if (!rect) return null
|
||
|
|
|
||
|
|
return createPortal(
|
||
|
|
<div
|
||
|
|
className="ephemeral-tooltip animation-scroll-in"
|
||
|
|
style={{
|
||
|
|
position: 'fixed',
|
||
|
|
left: rect.left + rect.width / 2,
|
||
|
|
top: rect.top - 8,
|
||
|
|
transform: 'translateX(-50%) translateY(-100%)',
|
||
|
|
}}>
|
||
|
|
<p>{message}</p>
|
||
|
|
</div>,
|
||
|
|
document.body,
|
||
|
|
)
|
||
|
|
}
|