feat: add tooltip to the collapsed sidebar (#179)

Co-authored-by: Armanpreet Ghotra <[email protected]>
jst-seminar-rostlab-tum · Jan 14, 2025 · e5f0c05 · e5f0c05
1 parent 9dd2085
commit e5f0c05
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 13 deletions.
diff --git a/src/components/Sidebar/CollapsedSidebar.tsx b/src/components/Sidebar/CollapsedSidebar.tsx
@@ -11,6 +11,8 @@ import { GlobalInsight } from '@/domain/enums/GlobalInsight.ts';
 import { CollapsedSidebarProps } from '@/domain/props/CollapsedSidebarProps';
 import { SidebarOperations } from '@/operations/sidebar/SidebarOperations';
 
+import { Tooltip } from '../Tooltip/Tooltip';
+
 export function CollapsedSidebar({ mapDataFetching }: CollapsedSidebarProps) {
   const { toggleSidebar } = useSidebar();
   const { selectedMapType, setSelectedMapType } = useSelectedMap();
@@ -32,18 +34,20 @@ export function CollapsedSidebar({ mapDataFetching }: CollapsedSidebarProps) {
         <CardBody>
           <div className="flex flex-col gap-1">
             {SidebarOperations.getSidebarMapTypes().map((item) => (
-              <Button
-                isIconOnly
-                key={item.key}
-                variant={selectedMapType === item.key ? undefined : 'light'}
-                className={selectedMapType === item.key ? 'bg-primary' : undefined}
-                onClick={() => onMapTypeSelect(item.key)}
-              >
-                <div className="flex items-center justify-center relative">
-                  <NextImage unoptimized loading="eager" src={item.icon} alt={item.label} width={24} height={24} />
-                  {mapDataFetching[item.key] && <Spinner className="absolute" color="white" />}
-                </div>
-              </Button>
+              <Tooltip text={item.label} placement="right">
+                <Button
+                  isIconOnly
+                  key={item.key}
+                  variant={selectedMapType === item.key ? undefined : 'light'}
+                  className={selectedMapType === item.key ? 'bg-primary' : undefined}
+                  onClick={() => onMapTypeSelect(item.key)}
+                >
+                  <div className="flex items-center justify-center relative">
+                    <NextImage unoptimized loading="eager" src={item.icon} alt={item.label} width={24} height={24} />
+                    {mapDataFetching[item.key] && <Spinner className="absolute" color="white" />}
+                  </div>
+                </Button>
+              </Tooltip>
             ))}
           </div>
         </CardBody>

diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -16,9 +16,20 @@ import TooltipProps from '@/domain/props/TooltipProps';
  * @param {string} props.titleStyle tailwind classes to style the title (optional)
  * @param {string} props.textStyle tailwind classes to style the text (optional)
  * @param {number} props.offset offset of the tooltip, default is set to 10 (optional)
+ * @param {TooltipPlacement} props.placement placement of the tooltip, default is set to 'top' (optional)
  * @constructor
  */
-export function Tooltip({ children, title, text, delay, warning, titleStyle, textStyle, offset = 10 }: TooltipProps) {
+export function Tooltip({
+  children,
+  title,
+  text,
+  delay,
+  warning,
+  titleStyle,
+  textStyle,
+  offset = 10,
+  placement,
+}: TooltipProps) {
   const RADIUS = 'sm';
   const SHADOW = 'md';
   const COLOR = 'default';
@@ -43,6 +54,7 @@ export function Tooltip({ children, title, text, delay, warning, titleStyle, tex
       offset={offset}
       radius={RADIUS}
       shadow={SHADOW}
+      placement={placement}
     >
       {Array.isArray(children) ? <div> {...children} </div> : children}
     </NextUITooltip>

diff --git a/src/domain/props/TooltipProps.tsx b/src/domain/props/TooltipProps.tsx
@@ -1,3 +1,4 @@
+import { TooltipPlacement } from '@nextui-org/tooltip';
 import { ReactNode } from 'react';
 
 export default interface TooltipProps {
@@ -9,4 +10,5 @@ export default interface TooltipProps {
   titleStyle?: string;
   textStyle?: string;
   offset?: number;
+  placement?: TooltipPlacement;
 }