feat(indicator): add title attr to display indicator for buttons

src/components/FunctionalArea/NavBar/NavBar.component.tsx

@@ -34,14 +34,14 @@ export const NavBar = (): JSX.Element => {
     <div className="flex min-h-full w-[88px] flex-col items-center justify-between bg-cultured py-8">
       <div data-testid="nav-buttons">
         <div className="mb-8 flex flex-col gap-[10px]">
-          <IconButton icon="info" onClick={openDrawerInfo} />
-          <IconButton icon="page" />
-          <IconButton icon="plugin" onClick={openDrawerPlugins} />
-          <IconButton icon="export" onClick={openDrawerExport} />
+          <IconButton icon="info" onClick={openDrawerInfo} title="Project info" />
+          <IconButton icon="page" title="API Doc" />
+          <IconButton icon="plugin" onClick={openDrawerPlugins} title="Available plugins" />
+          <IconButton icon="export" onClick={openDrawerExport} title="Export" />
         </div>
         <div className="flex flex-col gap-[10px]">
-          <IconButton icon="admin" onClick={openModalLogin} />
-          <IconButton icon="legend" onClick={openDrawerLegend} />
+          <IconButton icon="admin" onClick={openModalLogin} title="Login" />
+          <IconButton icon="legend" onClick={openDrawerLegend} title="Legend" />
         </div>
       </div>
 

src/components/FunctionalArea/TopBar/TopBar.component.tsx

@@ -20,10 +20,17 @@ export const TopBar = (): JSX.Element => {
       <div className="flex flex-row items-center">
         <UserAvatar />
         <SearchBar />
-        <Button icon="plus" isIcon isFrontIcon className="ml-8 mr-4" onClick={onSubmapsClick}>
+        <Button
+          icon="plus"
+          isIcon
+          isFrontIcon
+          className="ml-8 mr-4"
+          onClick={onSubmapsClick}
+          title="Submaps"
+        >
           Submaps
         </Button>
-        <Button icon="plus" isIcon isFrontIcon onClick={onOverlaysClick}>
+        <Button icon="plus" isIcon isFrontIcon onClick={onOverlaysClick} title="Overlays">
           Overlays
         </Button>
       </div>

src/components/Map/MapAdditionalActions/MapAdditionalActions.component.tsx

@@ -17,6 +17,7 @@ export const MapAdditionalActions = (): JSX.Element => {
         className="flex h-12 w-12 items-center justify-center rounded-full bg-white"
         onClick={zoomInToBioEntities}
         data-testid="location-button"
+        title="Center map"
       >
         <Icon className="h-[28px] w-[28px]" name="location" />
       </button>
@@ -26,6 +27,7 @@ export const MapAdditionalActions = (): JSX.Element => {
           className="flex h-12 w-12 items-center justify-center"
           onClick={zoomIn}
           data-testid="zoom-in-button"
+          title="Zoom in"
         >
           <Icon className="h-[24px] w-[24px]" name="magnifier-zoom-in" />
         </button>
@@ -35,6 +37,7 @@ export const MapAdditionalActions = (): JSX.Element => {
           className="flex h-12 w-12 items-center justify-center"
           onClick={zoomOut}
           data-testid="zoom-out-button"
+          title="Zoom out"
         >
           <Icon className="h-[24px] w-[24px]" name="magnifier-zoom-out" />
         </button>