Merge pull request #320 from CivicDataLab/319-add-tooltip-in-sector

Added ToolTip in Sectors

Author: Deepthi-Chand

app/[locale]/(user)/sectors/SectorsListing.tsx

@@ -10,7 +10,7 @@ import {
   SectorsListsQuery,
 } from '@/gql/generated/graphql';
 import { useQuery } from '@tanstack/react-query';
-import { Divider, SearchInput, Select, Spinner, Text } from 'opub-ui';
+import { Divider, SearchInput, Select, Spinner, Text, Tooltip } from 'opub-ui';
 
 import { GraphQL } from '@/lib/api';
 import { cn, generateJsonLd } from '@/lib/utils';
@@ -217,13 +217,15 @@ const SectorsListing = () => {
                             {' '}
                             {/* min-w-0 prevents text overflow */}
                             <div className="flex flex-col gap-2">
-                              <Text
+                             <Tooltip content={sectors.name}>
+                                <Text
                                 variant="headingLg"
                                 fontWeight="semibold"
                                 className="line-clamp-1 text-ellipsis overflow-hidden"
                               >
                                 {sectors.name}
                               </Text>
+                              </Tooltip>
                               <Divider className="h-[2px] bg-greyExtralight" />
                             </div>
                             <div className="flex gap-1">

lib/navigation.tsx

@@ -20,17 +20,16 @@ function useOnComplete() {
   const searchParams = useSearchParams();
   React.useEffect(() => navigateEnd(), [pathname, searchParams]);
 }
-
-function __RouterEvents() {
+function InternalRouterEvents() {
   useOnComplete();
   return null;
 }
 
-// https://github.com/joulev/nextjs13-appdir-router-events/blob/52e3457f183b0b638cd14c6c0e8c138e71a76895/app/router-events.tsx
 export function RouterEvents() {
   return (
     <React.Suspense>
-      <__RouterEvents />
+      <InternalRouterEvents />
     </React.Suspense>
   );
 }
+