Add tooltip for funder names

Author: VeckoTheGecko

src/components/funders.js

@@ -3,11 +3,10 @@ import {
   Container,
   Image,
   Text,
-  UnorderedList,
-  ListItem,
   Link,
   Grid,
   GridItem,
+  Tooltip,
 } from '@chakra-ui/react'
 import React from 'react'
 import { Funders as data } from '@/data/funders'
@@ -36,20 +35,21 @@ export const Funders = () => {
             justifyContent='center'
           >
             {funders.map((funder, index) => (
-              <GridItem
-                as={Link}
-                href={funder.url}
-                key={index}
-                display='flex'
-                alignItems='center'
-                justifyContent='center'
-                borderRight={
-                  index < funders.length - 1 ? '1px solid #ccc' : 'none'
-                }
-                pr={4}
-              >
-                <Image maxH={20} src={funder.logo} alt={funder.name} />
-              </GridItem>
+              <Tooltip key={index} label={funder.name}>
+                <GridItem
+                  as={Link}
+                  href={funder.url}
+                  display='flex'
+                  alignItems='center'
+                  justifyContent='center'
+                  borderRight={
+                    index < funders.length - 1 ? '1px solid #ccc' : 'none'
+                  }
+                  pr={4}
+                >
+                  <Image maxH={20} src={funder.logo} alt={funder.name} />
+                </GridItem>
+              </Tooltip>
             ))}
           </Grid>
         </Box>