feat(visManager): tooltips

libs/shared/lib/info/infoPanel.tsx

 import React, { useState } from 'react';
-import { Button } from '../components';
+import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../components';
 import { Addchart, Schema as SchemaIcon, Search as SearchIcon } from '@mui/icons-material';
 import Schema from '../schema/panel';
 import Searchbar from './search/searchbar';
@@ -13,30 +13,47 @@ export default function InfoPanel({ auth, manager }: { auth: boolean; manager: a
     <div className="info-panel w-full h-full flex">
       <div className="w-12 flex flex-col items-center justify-between">
         <div>
-          <Button
-            type="secondary"
-            variant="ghost"
-            size="md"
-            iconComponent={<SearchIcon />}
-            onClick={() => setTab('Search')}
-            additionalClasses={tab === 'Search' ? 'bg-secondary-100' : ''}
-          />
-          <Button
-            type="secondary"
-            variant="ghost"
-            size="md"
-            iconComponent={<SchemaIcon />}
-            onClick={() => setTab('Schema')}
-            additionalClasses={tab === 'Schema' ? 'bg-secondary-100' : ''}
-          />
-          <Button
-            type="secondary"
-            variant="ghost"
-            size="md"
-            iconComponent={<Addchart />}
-            onClick={() => setTab('Visualization')}
-            additionalClasses={tab === 'Visualization' ? 'bg-secondary-100' : ''}
-          />
+          <TooltipProvider delayDuration={100}>
+            <Tooltip>
+              <TooltipTrigger>
+                <Button
+                  type="secondary"
+                  variant="ghost"
+                  size="md"
+                  iconComponent={<SearchIcon />}
+                  onClick={() => setTab('Search')}
+                  additionalClasses={tab === 'Search' ? 'bg-secondary-100' : ''}
+                />
+              </TooltipTrigger>
+              <TooltipContent side={'right'}>Search</TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger>
+                <Button
+                  type="secondary"
+                  variant="ghost"
+                  size="md"
+                  iconComponent={<SchemaIcon />}
+                  onClick={() => setTab('Schema')}
+                  additionalClasses={tab === 'Schema' ? 'bg-secondary-100' : ''}
+                />
+              </TooltipTrigger>
+              <TooltipContent side={'right'}>Database schema</TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger>
+                <Button
+                  type="secondary"
+                  variant="ghost"
+                  size="md"
+                  iconComponent={<Addchart />}
+                  onClick={() => setTab('Visualization')}
+                  additionalClasses={tab === 'Visualization' ? 'bg-secondary-100' : ''}
+                />
+              </TooltipTrigger>
+              <TooltipContent side={'right'}>Visualization settings</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         </div>
         <ColorMode />
       </div>