feat: add tooltip component for links & sponsors data

src/components/Navigation/Navigation.jsx

@@ -8,6 +8,7 @@ import { Link as ReactDOMLink, NavLink, useLocation } from 'react-router-dom';
 import Link from '../Link/Link';
 import Logo from '../Logo/Logo';
 import Dropdown from '../Dropdown/Dropdown';
+import Tooltip from '../Tooltip/Tooltip';
 
 // Load Styling
 import '@docsearch/css';
@@ -70,14 +71,15 @@ NavigationIcon.propTypes = {
 };
 function NavigationIcon({ children, to, title }) {
   return (
-    <Link
-      to={to}
-      className="inline-flex items-center text-gray-100 dark:text-gray-200 hover:text-blue-200"
-      title={`webpack on ${title}`}
-      aria-label={`webpack on ${title}`}
-    >
-      {children}
-    </Link>
+    <Tooltip content={`webpack on ${title}`}>
+      <Link
+        to={to}
+        className="inline-flex items-center text-gray-100 dark:text-gray-200 hover:text-blue-200"
+        aria-label={`webpack on ${title}`}
+      >
+        {children}
+      </Link>
+    </Tooltip>
   );
 }
 const navigationIconProps = {

src/components/Support/Support.jsx

@@ -7,6 +7,7 @@ import VisibilitySensor from 'react-visibility-sensor';
 import Backers from './_supporters.json';
 import Additional from './AdditionalSupporters';
 import SmallIcon from '../../assets/icon-square-small-slack.png';
+import Tooltip from '../Tooltip/Tooltip';
 
 // Load Styling
 import './Support.scss';
@@ -225,34 +226,39 @@ export default class Support extends Component {
             </div>
 
             {supporters.map((supporter, index) => (
-              <a
+              <Tooltip
                 key={supporter.slug || index}
-                className="support__item"
-                title={`$${formatMoney(supporter.totalDonations / 100)} by ${
+                content={`$${formatMoney(supporter.totalDonations / 100)} by ${
                   supporter.name || supporter.slug
                 } ($${formatMoney(supporter.monthlyDonations / 100)} monthly)`}
-                target="_blank"
-                rel="noopener noreferrer nofollow"
-                href={
-                  supporter.website ||
-                  `https://opencollective.com/${supporter.slug}`
-                }
               >
-                {
-                  <img
-                    className={`support__${rank}-avatar`}
-                    src={
-                      inView && supporter.avatar ? supporter.avatar : SmallIcon
-                    }
-                    alt={
-                      supporter.name || supporter.slug
-                        ? `${supporter.name || supporter.slug}'s avatar`
-                        : 'avatar'
-                    }
-                    onError={this._handleImgError}
-                  />
-                }
-              </a>
+                <a
+                  className="support__item"
+                  target="_blank"
+                  rel="noopener noreferrer nofollow"
+                  href={
+                    supporter.website ||
+                    `https://opencollective.com/${supporter.slug}`
+                  }
+                >
+                  {
+                    <img
+                      className={`support__${rank}-avatar`}
+                      src={
+                        inView && supporter.avatar
+                          ? supporter.avatar
+                          : SmallIcon
+                      }
+                      alt={
+                        supporter.name || supporter.slug
+                          ? `${supporter.name || supporter.slug}'s avatar`
+                          : 'avatar'
+                      }
+                      onError={this._handleImgError}
+                    />
+                  }
+                </a>
+              </Tooltip>
             ))}
 
             <div className="support__bottom">

src/components/Tooltip/Tooltip.jsx

@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+const Tooltip = ({
+  children,
+  content,
+  position = 'bottom',
+  delay = 300,
+  className = '',
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [isDelayed, setIsDelayed] = useState(false);
+  const showTooltip = () => {
+    const timer = setTimeout(() => {
+      setIsDelayed(true);
+    }, delay);
+    setIsVisible(true);
+    return () => clearTimeout(timer);
+  };
+  const hideTooltip = () => {
+    setIsVisible(false);
+    setIsDelayed(false);
+  };
+  // Position classes - increase the margins to create more space
+  const positions = {
+    top: 'bottom-full left-1/2 -translate-x-1/2 mb-8',
+    bottom: 'top-full left-1/2 -translate-x-1/2 mt-10',
+    left: 'right-full top-1/2 -translate-y-1/2 mr-8',
+    right: 'left-full top-1/2 -translate-y-1/2 ml-8',
+  };
+  // Custom background color for both tooltip and triangle
+  const bgColor = '#526B78';
+  return (
+    <div
+      className={`relative ${className}`}
+      onMouseEnter={showTooltip}
+      onMouseLeave={hideTooltip}
+      onFocus={showTooltip}
+      onBlur={hideTooltip}
+    >
+      {children}
+      {isVisible && (
+        <div
+          className={`
+            absolute z-[9999]
+            ${positions[position]}
+            ${isDelayed ? 'opacity-100' : 'opacity-0'}
+            transition-opacity duration-200
+            pointer-events-none
+          `}
+        >
+          <div
+            className="text-white text-xs font-medium p-10 rounded-md whitespace-nowrap shadow-xl"
+            style={{ backgroundColor: bgColor }}
+          >
+            {content}
+            {/* Triangle/Arrow - Reduced size */}
+            {position === 'top' && (
+              <div
+                className="absolute top-full left-1/2 -translate-x-1/2 border-solid border-l-[6px] border-r-[6px] border-t-[6px] border-l-transparent border-r-transparent"
+                style={{ borderTopColor: bgColor }}
+              ></div>
+            )}
+            {position === 'bottom' && (
+              <div
+                className="absolute -top-[6px] left-1/2 -translate-x-1/2 border-solid border-l-[6px] border-r-[6px] border-b-[6px] border-l-transparent border-r-transparent"
+                style={{ borderBottomColor: bgColor }}
+              ></div>
+            )}
+            {position === 'left' && (
+              <div
+                className="absolute top-1/2 -translate-y-1/2 right-[-6px] border-solid border-t-[6px] border-b-[6px] border-l-[6px] border-t-transparent border-b-transparent"
+                style={{ borderLeftColor: bgColor }}
+              ></div>
+            )}
+            {position === 'right' && (
+              <div
+                className="absolute top-1/2 -translate-y-1/2 left-[-6px] border-solid border-t-[6px] border-b-[6px] border-r-[6px] border-t-transparent border-b-transparent"
+                style={{ borderRightColor: bgColor }}
+              ></div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+Tooltip.propTypes = {
+  children: PropTypes.node.isRequired,
+  content: PropTypes.node.isRequired,
+  position: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+  delay: PropTypes.number,
+  className: PropTypes.string,
+};
+
+export default Tooltip;