feat: Add tooltip component with styles and visibility logic

src/renderer/src/components/tooltip/tooltip.css.ts

@@ -0,0 +1,36 @@
+import { style } from "@vanilla-extract/css";
+
+export const tooltipStyle = style({
+  position: 'relative',
+  display: 'flex',
+  cursor: 'pointer',
+  alignItems: 'center'
+});
+
+export const tooltipTextStyle = style({
+  visibility: 'hidden',
+  backgroundColor: '#555',
+  color: '#fff',
+  textAlign: 'center',
+  borderRadius: '6px',
+  padding: '5px 5px',
+  position: 'absolute',
+  zIndex: '1',
+  bottom: '125%',
+  left: 'max(0%, min(100%, 50%))',
+  transform: 'translateX(-50%)',
+  ':after': {
+    content: '""',
+    position: 'absolute',
+    top: '100%',
+    left: '50%',
+    marginLeft: '-5px',
+    borderWidth: '5px',
+    borderStyle: 'solid',
+    borderColor: '#555 transparent transparent transparent',
+  },
+});
+
+export const tooltipVisible = style({
+  visibility: 'visible',
+});

src/renderer/src/components/tooltip/tooltip.tsx

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+import * as styles from './tooltip.css'
+
+interface TooltipProps {
+  children: React.ReactNode;
+  tooltipText: string;
+}
+
+export function Tooltip({ children, tooltipText }: Readonly<TooltipProps>) {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <div
+    className={styles.tooltipStyle}
+    onMouseEnter={() => setIsVisible(true)}
+    onMouseLeave={() => setIsVisible(false)}
+  >
+    {children}
+    <span className={`${styles.tooltipTextStyle} ${isVisible ? styles.tooltipVisible : ''}`}>{tooltipText}</span>
+  </div>
+  );
+}