diff --git a/packages/react/src/TooltipV2/Tooltip.tsx b/packages/react/src/TooltipV2/Tooltip.tsx index 9b0dae0be7a..415898faa27 100644 --- a/packages/react/src/TooltipV2/Tooltip.tsx +++ b/packages/react/src/TooltipV2/Tooltip.tsx @@ -197,6 +197,30 @@ export const Tooltip = React.forwardRef( const openTooltip = () => { if (tooltipElRef.current && triggerRef.current && !tooltipElRef.current.matches(':popover-open')) { + // can I set the position here? + + console.log('SET POSITION') + /* + * TOOLTIP POSITIONING + */ + const tooltip = tooltipElRef.current + const trigger = triggerRef.current + tooltip.setAttribute('popover', 'auto') + const settings = { + side: directionToPosition[direction].side, + align: directionToPosition[direction].align, + } + + const {top, left, anchorAlign, anchorSide} = getAnchoredPosition(tooltip, trigger, settings) + + tooltip.style.top = `${top}px` + tooltip.style.left = `${left}px` + + // 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 + const calculatedDirection = positionToDirection[`${anchorSide}-${anchorAlign}` as string] + setCalculatedDirection(calculatedDirection) + + console.log('OPEN TOOLTIP') tooltipElRef.current.showPopover() } } @@ -240,51 +264,55 @@ export const Tooltip = React.forwardRef( } } - /* - * TOOLTIP POSITIONING - */ - const tooltip = tooltipElRef.current - const trigger = triggerRef.current - tooltip.setAttribute('popover', 'auto') - const settings = { - side: directionToPosition[direction].side, - align: directionToPosition[direction].align, - } + // /* + // * TOOLTIP POSITIONING + // */ + // const tooltip = tooltipElRef.current + // const trigger = triggerRef.current + // tooltip.setAttribute('popover', 'auto') + // const settings = { + // side: directionToPosition[direction].side, + // align: directionToPosition[direction].align, + // } - const positionSet = () => { - console.log('top', tooltip.style.top) - console.log('left', tooltip.style.left) + // const positionSet = () => { - const {top, left, anchorAlign, anchorSide} = getAnchoredPosition(tooltip, trigger, settings) + // const {top, left, anchorAlign, anchorSide} = getAnchoredPosition(tooltip, trigger, settings) + // setTooltipPosition([top, left]) + // console.log('top', top) + // console.log('left', left) - tooltip.style.top = `${top}px` - tooltip.style.left = `${left}px` - // 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 - const calculatedDirection = positionToDirection[`${anchorSide}-${anchorAlign}` as string] - setCalculatedDirection(calculatedDirection) - } + // // tooltip.style.top = `${top}px` + // // tooltip.style.left = `${left}px` - tooltip.addEventListener('toggle', event => { - // @ts-ignore for now - if (event.newState === 'open') { - positionSet() - console.log('Popover has been shown') - } else { - console.log('Popover has been hidden') - } - }) + // // console.log('top', tooltip.style.top) + // // console.log('left', tooltip.style.left) + // // 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 + // const calculatedDirection = positionToDirection[`${anchorSide}-${anchorAlign}` as string] + // setCalculatedDirection(calculatedDirection) + // } - return () => { - tooltip.removeEventListener('toggle', event => { - // @ts-ignore for now - if (event.newState === 'open') { - positionSet() - console.log('Popover has been shown') - } else { - console.log('Popover has been hidden') - } - }) - } + // tooltip.addEventListener('toggle', event => { + // // @ts-ignore for now + // if (event.newState === 'open') { + // positionSet() + // console.log('Popover has been shown') + // } else { + // console.log('Popover has been hidden') + // } + // }) + + // return () => { + // tooltip.removeEventListener('toggle', event => { + // // @ts-ignore for now + // if (event.newState === 'open') { + // positionSet() + // console.log('Popover has been shown') + // } else { + // console.log('Popover has been hidden') + // } + // }) + // } }, [tooltipElRef, triggerRef, direction, type]) return (