diff --git a/css/stylesheet.css b/css/stylesheet.css
index 4ece4e7..9363756 100644
--- a/css/stylesheet.css
+++ b/css/stylesheet.css
@@ -20,3 +20,59 @@
 body {
     background-color: #F6F1EC;
 }
+
+/* TOOLTIP formatting */
+.maptooltip {
+    font-size: 14px;
+    background-color: black;
+    color: #F6F1EC;
+    padding: 20px;
+    margin: 0px 5px 0px 5px;
+    border-radius: 5px;
+    width: 110%;
+    height: 100%;
+}
+
+.maptooltip-left {
+    float: left;
+    text-align: left;
+    width: 50%;
+    height: 50%;
+    text-wrap: wrap;
+}
+
+.maptooltip-right {
+    float: right;
+    text-align: right;
+    width: 50%;
+    height: 50%;
+    text-wrap: wrap;
+}
+
+.maptooltip h3 {
+    text-align: center;
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
+
+.maptooltip h4 {
+    text-align: center;
+    margin-top: 5px;
+    margin-bottom: 0px;
+}
+
+
+/* override default leaflet formatting */
+.leaflet-tooltip {
+    background-color: transparent;
+    border: 5px;
+    box-shadow: none;
+}
+
+/* hide tooltip arrow */
+.leaflet-tooltip-top:before, 
+.leaflet-tooltip-bottom:before, 
+.leaflet-tooltip-left:before, 
+.leaflet-tooltip-right:before {
+    border: none !important;
+}
diff --git a/index.html b/index.html
index ba6b6d3..7fd0160 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,9 @@
 <html>
   <head>
-    <link rel="stylesheet" href="./css/stylesheet.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.7.0/gpx.min.js"></script>
+    <link rel="stylesheet" href="./css/stylesheet.css">
   </head>
   <body>
     <title>GPX track viewer</title>
diff --git a/js/gpx.js b/js/gpx.js
index 1ee6e1f..fdfff44 100644
--- a/js/gpx.js
+++ b/js/gpx.js
@@ -1,3 +1,7 @@
+/* gpx.js - display GPX tracks on a leaflet maps
+ * see leaflet-gpx https://github.com/mpetazzoni/leaflet-gpx for the underlying leaflet plugin
+ */
+
 var map = L.map('map');
 
 L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
@@ -5,42 +9,58 @@
 }).addTo(map);
 
 function download(url) {
-  const a = document.createElement('a')
-  a.href = url
-  a.download = url.split('/').pop()
-  document.body.appendChild(a)
-  a.click()
-  document.body.removeChild(a)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = url.split('/').pop()
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
 }
 
 function addGPX(map, gpx, lineColor) {
     new L.GPX(gpx, {
-            async: true,
-            marker_options: {
-                startIconUrl: 'images/pin-icon-start.png',
-                endIconUrl: 'images/pin-icon-end.png',
-                shadowUrl: 'images/pin-shadow.png'
-            },
+        async: true,
+        marker_options: {
+            startIconUrl: 'images/pin-icon-start.png',
+            endIconUrl: 'images/pin-icon-end.png',
+            shadowUrl: 'images/pin-shadow.png'
+        },
         polyline_options: {
-                smoothFactor: 3,
-                color: lineColor,
-                opacity: 1,
-                weight: 3,
-                lineCap: 'round'
-            }
+            smoothFactor: 3,
+            color: lineColor,
+            opacity: 1,
+            weight: 3,
+            lineCap: 'round'
+        }
     }).on('loaded', function(e) {
         map.fitBounds(e.target.getBounds());
     }).on('mouseover', function(e) {
         var paths = gpx.split("/")
-        this.bindTooltip(
-            "Click to download: " + paths[paths.length - 1],
-            { sticky: true }
-        )
+        var filename = paths[paths.length - 1];
+        var kms = e.target.get_distance() / 1000;
+        var movingTime = e.target.get_duration_string_iso(e.target.get_moving_time(), true);
+        var movingSpeed = e.target.get_moving_speed();
+        var totalAvgTime = e.target.get_duration_string_iso(e.target.get_total_time(), true);
+        var totalAvgSpeed = e.target.get_total_speed();
+        var tooltip = `
+<div class="maptooltip">
+    <h3>${e.target.get_name()}</h3>
+    <div class="maptooltip-left">
+        <b>Distance: ${kms.toFixed(2)} km</b><br>
+        Total time: ${totalAvgTime} h<br>
+        Moving time: ${movingTime} h<br>
+    </div>
+    <div class="maptooltip-right">
+        <b>Elevation gain: ${e.target.get_elevation_gain().toFixed()} m d+</b><br>
+        Avg speed: ${totalAvgSpeed.toFixed(2)} km/h<br>
+        Avg moving speed: ${movingSpeed.toFixed(2)} km/h <br>
+    </div>
+    <div style="clear:both"></div>
+    <h4>Click to download: ${filename}</h4>
+</div>`;
+        this.bindTooltip(tooltip, {sticky: true});
         this.openPopup(e.latlng);
-    }).on('mouseout', function(e) {
-        setTimeout(this.closePopup(), 500);
     }).on('click', function(e) {
-        setTimeout(this.closePopup(), 500);
         download(gpx);
     }).addTo(map);
 }