[TASK] Add button tooltip

lib/gui.js

@@ -64,6 +64,7 @@ define(['chroma-js', 'map', 'sidebar', 'tabs', 'container', 'legend',
 
       var buttonToggle = document.createElement('button');
       buttonToggle.classList.add('ion-eye', 'shadow');
+      buttonToggle.setAttribute('data-tooltip', _.t('button.switchView'));
       buttonToggle.onclick = function onclick() {
         if (content.constructor === Map) {
           router.view('g');

lib/map.js

@@ -24,6 +24,7 @@ define(['map/clientlayer', 'map/labelslayer',
 
       onAdd: function () {
         var button = L.DomUtil.create('button', 'ion-android-locate shadow');
+        button.setAttribute('data-tooltip', _.t('button.tracking'));
         L.DomEvent.disableClickPropagation(button);
         L.DomEvent.addListener(button, 'click', this.onClick, this);
 
@@ -61,6 +62,7 @@ define(['map/clientlayer', 'map/labelslayer',
 
       onAdd: function () {
         var button = L.DomUtil.create('button', 'ion-pin shadow');
+        button.setAttribute('data-tooltip', _.t('button.location'));
 
         // Click propagation isn't disabled as this causes problems with the
         // location picking mode; instead propagation is stopped in onClick().

locale/de.json

@@ -52,6 +52,11 @@
     "stats":"Statistiken",
     "about":"Über"
   },
+  "button": {
+    "switchView": "Ansicht wechseln",
+    "location":"Koordinaten wählen",
+    "tracking":"Lokaliserung"
+  },
   "momentjs":{
     "calendar":{
       "sameDay":"[heute um] LT [Uhr]",

locale/en.json

@@ -52,6 +52,11 @@
     "stats": "Statistics",
     "about": "About"
   },
+  "button": {
+    "switchView": "Switch view",
+    "location":"Pick coordinates",
+    "tracking":"Localisation"
+  },
   "momentjs": {
     "calendar": {
       "sameDay": "[Today at] LT",

scss/modules/_button.scss

@@ -37,6 +37,30 @@ button {
     }
   }
 
+  // Tooltip
+  &[data-tooltip] {
+    &::after {
+      background:  $color-black;
+      border-radius: 3px;
+      color: $color-white;
+      content: attr(data-tooltip);
+      font-family: $font-family;
+      font-size: $font-size;
+      padding: 0 12px;
+      position: absolute;
+      transform: translate(45px, 52px);
+      visibility: hidden;
+      white-space: nowrap;
+    }
+
+    &:hover {
+      &::after {
+        transition: visibility 0s linear .3s;
+        visibility: visible;
+      }
+    }
+  }
+
   &.close {
     background-color: transparent;
     border-radius: 0;