feat: add tooltip to ranking table

institutoreditus · Nov 13, 2024 · 0f7d785 · 0f7d785
1 parent 8e304da
commit 0f7d785
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 1 deletion.
diff --git a/pages/ranking/index.module.css b/pages/ranking/index.module.css
@@ -55,3 +55,50 @@
 .groupsTable tr:hover {
   background-color: rgb(239, 254, 255);
 }
+
+
+/* Tooltip styles */
+.degreeHeader {
+  text-align: left;
+  position: relative;
+}
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+  cursor: help;
+  z-index: 1000;
+}
+
+.tooltipIcon {
+  font-size: 12px;
+  margin-left: 5px;
+  vertical-align: middle;
+}
+
+
+.tooltipText {
+  visibility: hidden;
+  width: 230px;
+  background-color: #fff;
+  color: #000;
+  text-align: left;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 10px;
+  font-size: 12px;
+  position: absolute;
+  top: 100%;
+  left: 50%; 
+  transform: translateX(-50%); 
+  z-index: 2000; 
+  opacity: 0;
+  transition: opacity 0.3s ease, visibility 0s 0.3s;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.tooltip:hover .tooltipText {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity 0.3s ease, visibility 0s 0s;
+}
diff --git a/pages/ranking/index.tsx b/pages/ranking/index.tsx
@@ -6,6 +6,7 @@ import ResultsDisplay from "../../components/ranking/ResultsDisplay/ResultsDispl
 import Header from "../../components/ranking/Header/Header";
 import { useEffect, useState } from "react";
 import { GetRankingData } from "../api/ranking/types";
+import InfoIcon from "@material-ui/icons/Info";
 
 export default function RankingPage() {
   const [rankingData, setRankingData] = useState<GetRankingData>({
@@ -88,7 +89,17 @@ const Table = (props: { ranking: GetRankingData["ranking"] }) => {
       <table>
         <thead>
           <th>#</th>
-          <th style={{ textAlign: "left" }}>Curso (anos de entrada)</th>
+          <th className={styles.degreeHeader}>
+            Curso (anos de entrada)
+            <span className={styles.tooltip}>
+              <span className={styles.tooltipIcon}>
+              <InfoIcon style={{ fontSize: 14 }} />
+              </span>
+              <span className={styles.tooltipText}>
+              Estamos agrupando alunos com anos de entrada próximos, considerando intervalos de 5 anos. Por exemplo, alunos que ingressaram entre 2010 e 2014 serão agrupados juntos.
+              </span>
+            </span>
+          </th>
           <th>Doadores</th>
           <th>Total</th>
         </thead>