Add tooltip to signals

Author: mohdsayed

packages/design-system/src/components/circlePieChart/emptyCirclePieChart.tsx

@@ -22,8 +22,15 @@ import { VictoryPie } from 'victory-pie';
  * Internal dependencies
  */
 import { COLOR_MAP } from '../../theme/colors';
+import Tooltip from './tooltip';
 
-const EmptyCirclePieChart = () => {
+const EmptyCirclePieChart = ({
+  tooltipText = '',
+  showTooltip = false,
+}: {
+  tooltipText?: string;
+  showTooltip?: boolean;
+}) => {
   return (
     <div className="w-full h-full relative">
       <VictoryPie
@@ -35,6 +42,7 @@ const EmptyCirclePieChart = () => {
       <p className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center opacity-40 text-2xl leading-4 dark:text-bright-gray">
         0
       </p>
+      {tooltipText && showTooltip && <Tooltip tooltipText={tooltipText} />}
     </div>
   );
 };

packages/design-system/src/components/circlePieChart/index.tsx

@@ -24,6 +24,7 @@ import classNames from 'classnames';
  * Internal dependencies.
  */
 import EmptyCirclePieChart from './emptyCirclePieChart';
+import Tooltip from './tooltip';
 
 interface CirclePieChartProps {
   centerCount: number;
@@ -59,7 +60,10 @@ const CirclePieChart = ({
     >
       <div className="inline-block align-bottom w-16 relative">
         {centerCount <= 0 ? (
-          <EmptyCirclePieChart />
+          <EmptyCirclePieChart
+            tooltipText={tooltipText}
+            showTooltip={showTooltip}
+          />
         ) : (
           <div className={`w-full h-full relative ${pieChartExtraClasses}`}>
             <VictoryPie
@@ -79,16 +83,7 @@ const CirclePieChart = ({
               {centerCount <= MAX_COUNT ? centerCount : MAX_COUNT + '+'}
             </p>
             {tooltipText && showTooltip && (
-              <div
-                className="
-                absolute left-1/2 bottom-0 translate-x-[-50%] translate-y-[110%]
-                bg-black/80 text-white text-xs rounded px-2 py-1 shadow-lg
-                animate-fadeIn z-10 pointer-events-none text-center
-                max-w-xs min-w-[80px] w-max whitespace-pre-line transition-opacity duration-300
-              "
-              >
-                {tooltipText}
-              </div>
+              <Tooltip tooltipText={tooltipText} />
             )}
           </div>
         )}

packages/design-system/src/components/circlePieChart/tooltip.tsx

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+import React from 'react';
+
+const Tooltip = ({ tooltipText }: { tooltipText?: string }) => {
+  return (
+    <div className="absolute left-1/2 bottom-0 translate-x-[-50%] translate-y-[110%] bg-black/80 text-white text-xs rounded px-2 py-1 shadow-lg animate-fadeIn z-10 pointer-events-none text-center max-w-xs min-w-[80px] w-max whitespace-pre-line transition-opacity duration-300">
+      {tooltipText}
+    </div>
+  );
+};
+
+export default Tooltip;