50 lines
1.3 KiB
JavaScript
50 lines
1.3 KiB
JavaScript
import { useRef, useState } from 'react'
|
|
import { Popover } from 'react-bootstrap'
|
|
import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
|
|
import styles from './hoverable-popover.module.css'
|
|
|
|
export default function HoverablePopover ({ id, trigger, body, onShow }) {
|
|
const [showOverlay, setShowOverlay] = useState(false)
|
|
|
|
const timeoutId = useRef(null)
|
|
|
|
const handleMouseEnter = () => {
|
|
clearTimeout(timeoutId.current)
|
|
onShow && onShow()
|
|
timeoutId.current = setTimeout(() => {
|
|
setShowOverlay(true)
|
|
}, 500)
|
|
}
|
|
|
|
const handleMouseLeave = () => {
|
|
clearTimeout(timeoutId.current)
|
|
timeoutId.current = setTimeout(() => setShowOverlay(false), 100)
|
|
}
|
|
|
|
return (
|
|
<OverlayTrigger
|
|
show={showOverlay}
|
|
placement='bottom'
|
|
onHide={handleMouseLeave}
|
|
overlay={
|
|
<Popover
|
|
onPointerEnter={handleMouseEnter}
|
|
onPointerLeave={handleMouseLeave}
|
|
className={styles.HoverablePopover}
|
|
>
|
|
<Popover.Body className={styles.HoverablePopover}>
|
|
{body}
|
|
</Popover.Body>
|
|
</Popover>
|
|
}
|
|
>
|
|
<span
|
|
onPointerEnter={handleMouseEnter}
|
|
onPointerLeave={handleMouseLeave}
|
|
>
|
|
{trigger}
|
|
</span>
|
|
</OverlayTrigger>
|
|
)
|
|
}
|