Add tooltips

transitnownash · Sep 23, 2023 · e3fd9f4 · e3fd9f4
1 parent dac7b1f
commit e3fd9f4
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/src/components/MapLinks.js b/src/components/MapLinks.js
@@ -4,12 +4,17 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Link } from 'react-router-dom';
 import transitNowIcon from '../resources/transitnow.png';
 import './MapLinks.scss';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 
 function MapLinks() {
   return (
     <div className="map-links">
-      <Link to="/about" className="leaflet-control"><img src={transitNowIcon} height="35" width="35" alt="Transit Now" /></Link>
-      <Link to="/routes" className="leaflet-control"><FontAwesomeIcon icon={faRoute} fixedWidth={true} size={'2x'} /></Link>
+      <OverlayTrigger placement='left' overlay={<Tooltip>About</Tooltip>}>
+        <Link to="/about" className="leaflet-control"><img src={transitNowIcon} height="35" width="35" alt="Transit Now" /></Link>
+      </OverlayTrigger>
+      <OverlayTrigger placement='left' overlay={<Tooltip>Routes</Tooltip>}>
+        <Link to="/routes" className="leaflet-control"><FontAwesomeIcon icon={faRoute} fixedWidth={true} size={'2x'} /></Link>
+      </OverlayTrigger>
     </div>
   );
 }

diff --git a/src/components/TransitMap.scss b/src/components/TransitMap.scss
@@ -31,7 +31,7 @@
     border: 2px solid rgba(0,0,0,0.2);
     background-color: white;
     border-radius: 5px;
-    margin-bottom: 5px;
+    margin-bottom: 0.5rem;
   }
 }