Add tooltip to search field

Make search shortcut translatable

css/80_app.css

@@ -609,6 +609,9 @@ button.add-note svg.icon {
     border-radius: 20px 0 0 20px;
     background: #fff;
 }
+.search-add .search-wrap.focused .tooltip {
+    display: none;
+}
 .search-add .search-wrap:nth-last-child(2) {
     border-radius: 20px;
     border: none;

data/core.yaml

@@ -11,6 +11,8 @@ en:
   modes:
     add_feature:
       title: Add a feature
+      description: "Search for features to add to the map."
+      key: Tab
     add_area:
       title: Area
       description: "Add parks, buildings, lakes or other areas to the map."

dist/locales/en.json

@@ -12,7 +12,9 @@
         },
         "modes": {
             "add_feature": {
-                "title": "Add a feature"
+                "title": "Add a feature",
+                "description": "Search for features to add to the map.",
+                "key": "Tab"
             },
             "add_area": {
                 "title": "Area",

modules/ui/search_add.js

@@ -15,6 +15,7 @@ import {
 import { t, textDirection } from '../util/locale';
 import { svgIcon } from '../svg/index';
 import { tooltip } from '../util/tooltip';
+import { uiTooltipHtml } from './tooltipHtml';
 import { uiPresetFavorite } from './preset_favorite';
 import { uiPresetIcon } from './preset_icon';
 import { utilKeybinding, utilNoAuto, utilRebind } from '../util';
@@ -31,9 +32,16 @@ export function uiSearchAdd(context) {
 
         presets = context.presets().matchAnyGeometry(shownGeometry);
 
+        var key = t('modes.add_feature.key');
+
         var searchWrap = selection
             .append('div')
-            .attr('class', 'search-wrap');
+            .attr('class', 'search-wrap')
+            .call(tooltip()
+                .placement('bottom')
+                .html(true)
+                .title(function(d) { return uiTooltipHtml(t('modes.add_feature.description'), key); })
+            );
 
         search = searchWrap
             .append('input')
@@ -48,6 +56,7 @@ export function uiSearchAdd(context) {
                 search.attr('clicking', null);
             })
             .on('focus', function() {
+                searchWrap.classed('focused', true);
                 if (search.attr('clicking')) {
                     search.attr('focusing', true);
                     search.attr('clicking', null);
@@ -57,6 +66,7 @@ export function uiSearchAdd(context) {
                 popover.classed('hide', false);
             })
             .on('blur', function() {
+                searchWrap.classed('focused', false);
                 popover.classed('hide', true);
             })
             .on('click', function() {
@@ -88,7 +98,7 @@ export function uiSearchAdd(context) {
 
         context.features().on('change.search-add', updateForFeatureHiddenState);
 
-        context.keybinding().on('tab', function() {
+        context.keybinding().on(key, function() {
             search.node().focus();
             d3_event.preventDefault();
             d3_event.stopPropagation();