Fix the issue where tooltips persist, blocking access to UI controls. #8255

Author: Rohit Bhati

web/pgadmin/static/js/components/Buttons.jsx

@@ -197,7 +197,7 @@ export const PgIconButton = forwardRef(({icon, title, shortcut, className, split
     }
   } else if(color == 'primary') {
     return (
-      <Tooltip title={shortcutTitle || title || ''} aria-label={title || ''} enterDelay={isDropdown ? 1500 : undefined} placement={tooltipPlacement}>
+      <Tooltip title={shortcutTitle || title || ''} aria-label={title || ''} enterDelay={isDropdown ? 1500 : undefined} placement={tooltipPlacement} disableInteractive>
         <PrimaryButton ref={ref} style={style}
           className={['Buttons-iconButton', (splitButton ? 'Buttons-splitButton' : ''), className].join(' ')}
           accessKey={accesskey} data-label={title || ''} {...props}>
@@ -208,7 +208,7 @@ export const PgIconButton = forwardRef(({icon, title, shortcut, className, split
     );
   } else {
     return (
-      <Tooltip title={shortcutTitle || title || ''} aria-label={title || ''} enterDelay={isDropdown ? 1500 : undefined} placement={tooltipPlacement}>
+      <Tooltip title={shortcutTitle || title || ''} aria-label={title || ''} enterDelay={isDropdown ? 1500 : undefined} placement={tooltipPlacement} disableInteractive>
         <DefaultButton ref={ref} style={style}
           className={['Buttons-iconButton', 'Buttons-iconButtonDefault',(splitButton ? 'Buttons-splitButton' : ''), className].join(' ')}
           accessKey={accesskey} data-label={title || ''} {...props}>

web/pgadmin/tools/sqleditor/static/js/components/sections/ConnectionBar.jsx

@@ -110,7 +110,7 @@ export function ConnectionBar({connected, connecting, connectionStatus, connecti
             onClick={queryToolCtx.params.is_query_tool ? ()=>setConnDropdownOpen(true) : undefined}
             style={{backgroundColor: queryToolCtx.params.bgcolor, color: queryToolCtx.params.fgcolor}}
           >
-            <Tooltip title={queryToolCtx.params.is_query_tool ? '' : connTitle}>
+            <Tooltip title={queryToolCtx.params.is_query_tool ? '' : connTitle} disableInteractive>
               <Box display="flex" width="100%">
                 <Box textOverflow="ellipsis" overflow="hidden" marginRight="auto">{connecting && gettext('(Obtaining connection)')}{connTitle}</Box>
                 {queryToolCtx.params.is_query_tool && <Box display="flex" alignItems="center"><KeyboardArrowDownIcon /></Box>}