From 049f040c921231f84f6275ae017c0bee3579b9a7 Mon Sep 17 00:00:00 2001
From: MarcosPierasNL <pieras.marcos@gmail.com>
Date: Mon, 1 Jul 2024 17:46:44 +0200
Subject: [PATCH] feat: add tooltip on text
---
.../lib/components/CardToolTipVis/index.tsx | 50 ++++++++++++-------
1 file changed, 31 insertions(+), 19 deletions(-)
diff --git a/libs/shared/lib/components/CardToolTipVis/index.tsx b/libs/shared/lib/components/CardToolTipVis/index.tsx
index fb81db0cd..e2eb43be2 100644
--- a/libs/shared/lib/components/CardToolTipVis/index.tsx
+++ b/libs/shared/lib/components/CardToolTipVis/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
import { Icon } from '@graphpolaris/shared/lib/components/icon';
import { AbcOutlined, Settings } from '@mui/icons-material';
import styles from './cardtooltipvis.module.scss';
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@graphpolaris/shared/lib/components/tooltip';
export type CardToolTipVisProps = {
type: string;
@@ -14,28 +15,39 @@ export type CardToolTipVisProps = {
export const CardToolTipVis: React.FC<CardToolTipVisProps> = ({ type, name, data, colorHeader }) => {
return (
- <div className="border-2 border-sec-200 bg-white">
+ <div className="border-2 border-sec-200 bg-white ">
<div className="flex m-0 items-center border-b-2 border-sec-200">
- <div className="h-9 w-4" style={{ backgroundColor: 'hsl(29 96 60)' }}></div>
+ <div className="h-9 w-4" style={{ backgroundColor: 'hsl(29 96% 60%)' }}></div>
<span className="text-xl ml-2">{name}</span>
</div>
- <div className="px-4 py-2">
- {data &&
- Object.entries(data).map(([k, v]) => (
- <div key={k} className="flex flex-row gap-3 items-center">
- <span className="font-semibold">{k}</span>
- <span className="ml-auto max-w-[10rem] text-right truncate w-[60%]">
- {type === 'schema' ? (
- <Icon component={v === 'int' ? <Settings /> : <AbcOutlined />} />
- ) : v !== undefined && (typeof v !== 'object' || Array.isArray(v)) ? (
- <span>{v.toString()}</span>
- ) : (
- <div className={`ml-auto h-4 w-12 ${styles['diagonal-lines']}`}></div>
- )}
- </span>
- </div>
- ))}
- </div>
+ <TooltipProvider delayDuration={300}>
+ <div className="px-4 py-2 ">
+ {data &&
+ Object.entries(data).map(([k, v]) => (
+ <Tooltip key={k}>
+ <TooltipTrigger asChild>
+ <div className="flex flex-row gap-3 items-center">
+ <span className="font-semibold">{k}</span>
+ <span className="ml-auto max-w-[10rem] text-right truncate w-[60%]">
+ {type === 'schema' ? (
+ <Icon component={v === 'int' ? <Settings /> : <AbcOutlined />} />
+ ) : v !== undefined && (typeof v !== 'object' || Array.isArray(v)) ? (
+ <span>{v.toString()}</span>
+ ) : (
+ <div className={`ml-auto h-4 w-12 ${styles['diagonal-lines']}`}></div>
+ )}
+ </span>
+ </div>
+ </TooltipTrigger>
+ <TooltipContent>
+ <div>
+ <span>{v !== undefined && (typeof v !== 'object' || Array.isArray(v)) ? v : 'noData'}</span>
+ </div>
+ </TooltipContent>
+ </Tooltip>
+ ))}
+ </div>
+ </TooltipProvider>
</div>
);
};
--
GitLab