| 198 | const [isPopoverOpen, setIsPopoverOpen] = useState(false) |
| 199 | |
| 200 | const openTooltip = () => { |
| 201 | if ( |
| 202 | tooltipElRef.current && |
| 203 | triggerRef.current && |
| 204 | tooltipElRef.current.hasAttribute('popover') && |
| 205 | !tooltipElRef.current.matches(':popover-open') |
| 206 | ) { |
| 207 | const tooltip = tooltipElRef.current |
| 208 | const trigger = triggerRef.current |
| 209 | tooltip.showPopover() |
| 210 | setIsPopoverOpen(true) |
| 211 | /* |
| 212 | * TOOLTIP POSITIONING |
| 213 | */ |
| 214 | const settings = { |
| 215 | side: directionToPosition[direction].side, |
| 216 | align: directionToPosition[direction].align, |
| 217 | } |
| 218 | const {top, left, anchorAlign, anchorSide} = getAnchoredPosition(tooltip, trigger, settings) |
| 219 | // This is required to make sure the popover is positioned correctly i.e. when there is not enough space on the specified direction, we set a new direction to position the ::after |
| 220 | const calculatedDirection = positionToDirection[`${anchorSide}-${anchorAlign}` as string] |
| 221 | setCalculatedDirection(calculatedDirection) |
| 222 | tooltip.style.top = `${top}px` |
| 223 | tooltip.style.left = `${left}px` |
| 224 | } |
| 225 | } |
| 226 | const closeTooltip = () => { |
| 227 | if ( |
| 228 | tooltipElRef.current && |