From eca2fb10ae8b93a5f29bbed361797a5f0c054603 Mon Sep 17 00:00:00 2001
From: 2427021 <s.a.vink@students.uu.nl>
Date: Mon, 25 Mar 2024 09:32:43 +0100
Subject: [PATCH] feat(visManager): tooltips
---
libs/shared/lib/info/infoPanel.tsx | 67 +++++++++++++++++++-----------
1 file changed, 42 insertions(+), 25 deletions(-)
diff --git a/libs/shared/lib/info/infoPanel.tsx b/libs/shared/lib/info/infoPanel.tsx
index 9f52382d2..7ff321647 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>
--
GitLab