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;