diff --git a/libs/shared/lib/info/infoPanel.tsx b/libs/shared/lib/info/infoPanel.tsx index 9f52382d210e23e331925868cb15711ea2bf65d1..7ff3216474426bdd13600cf4828f18219fb24c4c 100644 --- a/libs/shared/lib/info/infoPanel.tsx +++ b/libs/shared/lib/info/infoPanel.tsx @@ -1,5 +1,5 @@ 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>