Hide the tooltip on the button whenever the dropdown is open (#3193)

Resolves #3151

Author: tom2drum

ui/address/SolidityscanReport.tsx

@@ -8,6 +8,7 @@ import solidityScanIcon from 'icons/brands/solidity_scan.svg';
 import useFetchReport from 'lib/solidityScan/useFetchReport';
 import { Link } from 'toolkit/chakra/link';
 import { PopoverBody, PopoverContent, PopoverRoot } from 'toolkit/chakra/popover';
+import { useDisclosure } from 'toolkit/hooks/useDisclosure';
 import SolidityscanReportButton from 'ui/shared/solidityscanReport/SolidityscanReportButton';
 import SolidityscanReportDetails from 'ui/shared/solidityscanReport/SolidityscanReportDetails';
 import SolidityscanReportScore from 'ui/shared/solidityscanReport/SolidityscanReportScore';
@@ -17,7 +18,7 @@ interface Props {
 }
 
 const SolidityscanReport = ({ hash }: Props) => {
-
+  const popover = useDisclosure();
   const { data, isPlaceholderData, isError } = useFetchReport({ hash });
 
   if (isError || !data) {
@@ -35,10 +36,11 @@ const SolidityscanReport = ({ hash }: Props) => {
   const vulnerabilitiesCount = vulnerabilitiesCounts.reduce((acc, val) => acc + val, 0);
 
   return (
-    <PopoverRoot>
+    <PopoverRoot open={ popover.open } onOpenChange={ popover.onOpenChange }>
       <SolidityscanReportButton
         score={ score }
         isLoading={ isPlaceholderData }
+        tooltipDisabled={ popover.open }
       />
       <PopoverContent w={{ base: '100vw', lg: '328px' }}>
         <PopoverBody textStyle="sm">

ui/address/clusters/AddressClusters.tsx

@@ -20,6 +20,7 @@ import { Link } from 'toolkit/chakra/link';
 import { PopoverBody, PopoverContent, PopoverRoot, PopoverTrigger } from 'toolkit/chakra/popover';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { Tooltip } from 'toolkit/chakra/tooltip';
+import { useDisclosure } from 'toolkit/hooks/useDisclosure';
 import ClustersEntity from 'ui/shared/entities/clusters/ClustersEntity';
 import IconSvg from 'ui/shared/IconSvg';
 
@@ -48,6 +49,8 @@ const ClustersGrid = ({ data }: ClustersGridProps) => {
 const AddressClusters = ({ query, addressHash }: Props) => {
   const { data, isPending, isError } = query;
 
+  const popover = useDisclosure();
+
   if (isError) {
     return null;
   }
@@ -71,8 +74,8 @@ const AddressClusters = ({ query, addressHash }: Props) => {
   const showMoreLink = hasMoreClusters(ownedClusters.length, 10);
 
   return (
-    <PopoverRoot>
-      <Tooltip content="List of clusters registered to this address" disableOnMobile>
+    <PopoverRoot open={ popover.open } onOpenChange={ popover.onOpenChange }>
+      <Tooltip content="List of clusters registered to this address" disabled={ popover.open } disableOnMobile closeOnClick>
         <div>
           <PopoverTrigger>
             <Button

ui/address/ensDomains/AddressEnsDomains.tsx

@@ -14,6 +14,7 @@ import { Link } from 'toolkit/chakra/link';
 import { PopoverBody, PopoverContent, PopoverRoot, PopoverTrigger } from 'toolkit/chakra/popover';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { Tooltip } from 'toolkit/chakra/tooltip';
+import { useDisclosure } from 'toolkit/hooks/useDisclosure';
 import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
 import IconSvg from 'ui/shared/IconSvg';
 
@@ -38,6 +39,7 @@ const DomainsGrid = ({ data }: { data: Array<bens.Domain> }) => {
 
 const AddressEnsDomains = ({ query, addressHash, mainDomainName }: Props) => {
   const { data, isPending, isError } = query;
+  const popover = useDisclosure();
 
   if (isError) {
     return null;
@@ -82,8 +84,8 @@ const AddressEnsDomains = ({ query, addressHash, mainDomainName }: Props) => {
   const totalRecords = data.items.length > 40 ? '40+' : data.items.length;
 
   return (
-    <PopoverRoot>
-      <Tooltip content="List of names resolved or owned by this address" disableOnMobile>
+    <PopoverRoot open={ popover.open } onOpenChange={ popover.onOpenChange }>
+      <Tooltip content="List of names resolved or owned by this address" disabled={ popover.open } disableOnMobile closeOnClick>
         <div>
           <PopoverTrigger>
             <Button

ui/shared/VerifyWith.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { Button } from 'toolkit/chakra/button';
 import { PopoverBody, PopoverContent, PopoverRoot, PopoverTrigger } from 'toolkit/chakra/popover';
 import { Tooltip } from 'toolkit/chakra/tooltip';
+import { useDisclosure } from 'toolkit/hooks/useDisclosure';
 import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
@@ -15,10 +16,11 @@ interface Props {
 }
 
 const VerifyWith = ({ className, links, label, longText, shortText }: Props) => {
+  const popover = useDisclosure();
 
   return (
-    <PopoverRoot>
-      <Tooltip content={ label } disableOnMobile>
+    <PopoverRoot open={ popover.open } onOpenChange={ popover.onOpenChange }>
+      <Tooltip content={ label } disabled={ popover.open } disableOnMobile closeOnClick>
         <Box className={ className }>
           <PopoverTrigger>
             <Button

ui/shared/solidityscanReport/SolidityscanReportButton.tsx

@@ -13,15 +13,16 @@ import useScoreLevelAndColor from './useScoreLevelAndColor';
 interface Props extends ButtonProps {
   score: number;
   isLoading?: boolean;
+  tooltipDisabled?: boolean;
 }
 
-const SolidityscanReportButton = ({ score, isLoading, ...rest }: Props) => {
+const SolidityscanReportButton = ({ score, isLoading, tooltipDisabled, ...rest }: Props) => {
   const { scoreColor } = useScoreLevelAndColor(score);
   const colorLoading = { _light: 'gray.300', _dark: 'gray.600' };
   const onFocusCapture = usePreventFocusAfterModalClosing();
 
   return (
-    <Tooltip content="Security score" disableOnMobile>
+    <Tooltip content="Security score" disabled={ tooltipDisabled } disableOnMobile closeOnClick>
       <Box>
         <PopoverTrigger>
           <Button