refactor(CPopover, CTooltip): prevent interface flickering when component change visibility

Author: mrholek

packages/coreui-react/src/components/popover/CPopover.tsx

@@ -149,6 +149,7 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
             }
 
             initPopper(togglerRef.current, popoverRef.current, popperConfig)
+            popoverRef.current.style.removeProperty('display')
             popoverRef.current.classList.add('show')
             onShow && onShow()
           }
@@ -160,6 +161,10 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
           popoverRef.current.classList.remove('show')
           onHide && onHide()
           executeAfterTransition(() => {
+            if (popoverRef.current) {
+              popoverRef.current.style.display = 'none'
+            }
+
             destroyPopper()
             setMounted(false)
           }, popoverRef.current)
@@ -193,6 +198,9 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
               id={uID.current}
               ref={forkedRef}
               role="tooltip"
+              style={{
+                display: 'none',
+              }}
               {...rest}
             >
               <div className="popover-arrow"></div>

packages/coreui-react/src/components/tooltip/CTooltip.tsx

@@ -144,6 +144,7 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
             }
 
             initPopper(togglerRef.current, tooltipRef.current, popperConfig)
+            tooltipRef.current.style.removeProperty('display')
             tooltipRef.current.classList.add('show')
             onShow && onShow()
           }
@@ -155,6 +156,10 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
           tooltipRef.current.classList.remove('show')
           onHide && onHide()
           executeAfterTransition(() => {
+            if (tooltipRef.current) {
+              tooltipRef.current.style.display = 'none'
+            }
+
             destroyPopper()
             setMounted(false)
           }, tooltipRef.current)
@@ -192,6 +197,9 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
               id={uID.current}
               ref={forkedRef}
               role="tooltip"
+              style={{
+                display: 'none',
+              }}
               {...rest}
             >
               <div className="tooltip-arrow"></div>