techstack tooltip / tall Content main => particle playground

src/css/TechStack.css

@@ -72,3 +72,42 @@
 .techStackContainer.expanded {
   max-height: 600px; /* Expanded max-height */
 }
+
+.react-tooltip {
+  background-color: #333;
+  color: #fff;
+  font-size: 0.9rem;
+  border-radius: 4px;
+  padding: 5px 10px;
+}
+
+/* Tooltip container */
+.tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+/* Tooltip text */
+.tooltipText {
+  visibility: hidden;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 5px;
+  padding: 5px 10px;
+  position: absolute;
+  z-index: 1;
+  top: 90%; /* Position above the element */
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0;
+  transition: opacity 0.3s;
+  font-size: 0.8rem;
+  white-space: nowrap;
+}
+
+/* Show the tooltip on hover */
+.tooltip:hover .tooltipText {
+  visibility: visible;
+  opacity: 1;
+}