From e53d8fc755b339557268d4acf11aab5bc29ca4f5 Mon Sep 17 00:00:00 2001
From: Xaver Maierhofer <xaver.maierhofer@xwissen.info>
Date: Thu, 2 Feb 2017 01:31:57 +0100
Subject: [PATCH] [TASK] Add button tooltip

---
 lib/gui.js                |  1 +
 lib/map.js                |  2 ++
 locale/de.json            |  5 +++++
 locale/en.json            |  5 +++++
 scss/modules/_button.scss | 24 ++++++++++++++++++++++++
 5 files changed, 37 insertions(+)

diff --git a/lib/gui.js b/lib/gui.js
index b195a75..9802d86 100644
--- a/lib/gui.js
+++ b/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');
diff --git a/lib/map.js b/lib/map.js
index 94ca0ca..e0e6091 100644
--- a/lib/map.js
+++ b/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().
diff --git a/locale/de.json b/locale/de.json
index 0eadaa6..67fb52e 100644
--- a/locale/de.json
+++ b/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]",
diff --git a/locale/en.json b/locale/en.json
index e3ec0ac..8a342f6 100644
--- a/locale/en.json
+++ b/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",
diff --git a/scss/modules/_button.scss b/scss/modules/_button.scss
index 5d7a15d..b997f4e 100644
--- a/scss/modules/_button.scss
+++ b/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;