wip

src/components/menu/index.tsx

@@ -5,6 +5,7 @@ import {
   MenuItem,
   MenuList,
   Spinner,
+  Tooltip,
 } from "@chakra-ui/react";
 import { useState } from "react";
 
@@ -16,12 +17,14 @@ type IconButtonMenuProbs = {
   icon: React.ReactElement;
   onOpen: () => Promise<IconButtonMenuItems[]>;
   onClick: (value: string) => void;
+  tooltip: string;
 };
 
 export const IconButtonMenu = ({
   icon,
   onOpen,
   onClick,
+  tooltip,
 }: IconButtonMenuProbs) => {
   const [items, setItems] = useState<IconButtonMenuItems[]>([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -34,12 +37,15 @@ export const IconButtonMenu = ({
   };
   return (
     <Menu onOpen={handleOnOpen}>
+      <Tooltip label={tooltip}>
         <MenuButton
           as={IconButton}
           aria-label="Options"
           icon={icon}
           variant="unstyled"
         />
+      </Tooltip>
+
       <MenuList>
         {isLoading ? (
           <MenuItem>

src/window/phone/index.tsx

@@ -411,9 +411,9 @@ export const Phone = ({
         >
           {isAdvanceMode && isSipClientIdle(callStatus) && (
             <HStack spacing={2} align="start" w="full">
-              <Tooltip label="Call to user">
               <IconButtonMenu
                 icon={<Users />}
+                tooltip="Call to user"
                 onClick={(value) => {
                   setInputNumber(value);
                   makeOutboundCall(value);
@@ -440,10 +440,9 @@ export const Phone = ({
                   );
                 }}
               />
-              </Tooltip>
-              <Tooltip label="Call to a queue">
               <IconButtonMenu
                 icon={<GitMerge />}
+                tooltip="Call to a queue"
                 onClick={(value) => {
                   const calledQueue = `queue-${value}`;
                   setInputNumber(calledQueue);
@@ -466,11 +465,10 @@ export const Phone = ({
                   );
                 }}
               />
-              </Tooltip>
 
-              <Tooltip label="Call to an application">
               <IconButtonMenu
                 icon={<List />}
+                tooltip="Call to an application"
                 onClick={(value) => {
                   const calledAppId = `app-${value}`;
                   setInputNumber(calledAppId);
@@ -493,7 +491,6 @@ export const Phone = ({
                   );
                 }}
               />
-              </Tooltip>
             </HStack>
           )}