diff --git a/css/app.css b/css/app.css
index 29f5b82b5..9f9e54c01 100644
--- a/css/app.css
+++ b/css/app.css
@@ -849,13 +849,13 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     margin: 4px;
 }
 
-.geocode-control div {
+.geocode-control div.content {
     top: 50px;
     width: 340px;
     margin: 4px;
     padding: 5px;
 }
-.geocode-control div span {
+.geocode-control div.content span {
     display: inline-block;
     border-bottom: 1px solid #333;
 }
diff --git a/js/id/ui.js b/js/id/ui.js
index 7ae2c9e28..e1daad3a1 100644
--- a/js/id/ui.js
+++ b/js/id/ui.js
@@ -38,20 +38,21 @@ iD.ui = function(context) {
             .call(iD.ui.Save(context));
 
         container.append('div')
-            .attr('class', 'zoombuttons map-control')
+            .attr('class', 'map-control zoombuttons')
             .call(iD.ui.Zoom(context));
 
-        if (navigator.geolocation) {
-            container.append('div')
-                .call(iD.ui.geolocate(map));
-        }
+        container.append('div')
+            .attr('class', 'map-control geocode-control')
+            .call(iD.ui.Geocoder(context));
 
-        container.append('div').attr('class', 'geocode-control map-control')
-            .call(iD.ui.geocoder(context));
-
-        container.append('div').attr('class', 'map-control layerswitcher-control')
+        container.append('div')
+            .attr('class', 'map-control layerswitcher-control')
             .call(iD.ui.layerswitcher(context));
 
+        container.append('div')
+            .attr('class', 'map-control geolocate-control')
+            .call(iD.ui.Geolocate(map));
+
         container.append('div')
             .style('display', 'none')
             .attr('class', 'inspector-wrap fr col5');
diff --git a/js/id/ui/geocoder.js b/js/id/ui/geocoder.js
index 7b79c2158..d0479e61d 100644
--- a/js/id/ui/geocoder.js
+++ b/js/id/ui/geocoder.js
@@ -1,4 +1,4 @@
-iD.ui.geocoder = function(context) {
+iD.ui.Geocoder = function(context) {
     function resultExtent(bounds) {
         return new iD.geo.Extent(
             [parseFloat(bounds[3]), parseFloat(bounds[0])],
@@ -75,8 +75,12 @@ iD.ui.geocoder = function(context) {
         var button = selection.append('button')
             .attr('tabindex', -1)
             .attr('title', t('geocoder.title'))
-            .html('<span class=\'geocode icon\'></span>')
-            .on('click', toggle);
+            .on('click', toggle)
+            .call(bootstrap.tooltip()
+                .placement('right'));
+
+        button.append('span')
+            .attr('class', 'icon geocode');
 
         var gcForm = selection.append('form');
 
diff --git a/js/id/ui/geolocate.js b/js/id/ui/geolocate.js
index 14b060e8a..5356039dd 100644
--- a/js/id/ui/geolocate.js
+++ b/js/id/ui/geolocate.js
@@ -1,4 +1,8 @@
-iD.ui.geolocate = function(map) {
+iD.ui.Geolocate = function(map) {
+    function click() {
+        navigator.geolocation.getCurrentPosition(
+            success, error);
+    }
 
     function success(position) {
         map.center([position.coords.longitude, position.coords.latitude]);
@@ -7,17 +11,16 @@ iD.ui.geolocate = function(map) {
     function error() { }
 
     return function(selection) {
-        selection
-            .attr('class', 'geolocate-control map-control')
-            .append('button')
+        if (!navigator.geolocation) return;
+
+        var button = selection.append('button')
             .attr('tabindex', -1)
             .attr('title', 'Show My Location')
-            .on('click', function() {
-                navigator.geolocation.getCurrentPosition(
-                    success, error);
-            })
-            .append('span')
-                .attr('class','icon geolocate');
-    };
+            .on('click', click)
+            .call(bootstrap.tooltip()
+                .placement('right'));
 
+         button.append('span')
+             .attr('class', 'icon geolocate');
+    };
 };
diff --git a/js/id/ui/layerswitcher.js b/js/id/ui/layerswitcher.js
index 9ae4f3fbe..60fd674e0 100644
--- a/js/id/ui/layerswitcher.js
+++ b/js/id/ui/layerswitcher.js
@@ -23,10 +23,13 @@ iD.ui.layerswitcher = function(context) {
             .attr('tabindex', -1)
             .attr('class', 'fillD')
             .attr('title', t('layerswitcher.description'))
-            .html("<span class='layers icon'></span>")
-            .on('click.layerswitcher-toggle', toggle);
+            .on('click.layerswitcher-toggle', toggle)
+            .call(bootstrap.tooltip()
+                .placement('right'));
+
+        button.append('span')
+            .attr('class', 'layers icon');
 
-        function show() { setVisible(true); }
         function hide() { setVisible(false); }
         function toggle() { setVisible(content.classed('hide')); }