From 8429b51d6eafbc4b175a0c91a5f653a26e22922a Mon Sep 17 00:00:00 2001
From: Darren Lines <darren@darrenlines.uk>
Date: Thu, 19 May 2022 11:56:36 +0100
Subject: [PATCH 1/2] Let help icons click through to settings

---
 js/settings.js            |  27 ++++++++++
 tabs/advanced_tuning.html | 106 +++++++++++++++++++-------------------
 tabs/configuration.html   |  28 +++++-----
 tabs/failsafe.html        |  14 ++---
 tabs/gps.html             |  46 +++++------------
 tabs/osd.html             |  38 +++++++-------
 tabs/outputs.html         |  14 ++---
 tabs/pid_tuning.html      |  68 ++++++++++++------------
 8 files changed, 175 insertions(+), 166 deletions(-)

diff --git a/js/settings.js b/js/settings.js
index e07ea3c8..6502ba3c 100644
--- a/js/settings.js
+++ b/js/settings.js
@@ -508,6 +508,8 @@ var Settings = (function () {
     self.processHtml = function(callback) {
         return function() {
             self.configureInputs().then(callback);
+            self.linkHelpIcons();
+            //self.configureInputs().then(self.linkHelpIcons().then(callback));
         };
     };
 
@@ -515,5 +517,30 @@ var Settings = (function () {
         return $('[data-setting="' + settingName + '"]').val();
     };
 
+    self.linkHelpIcons = function() {
+        var helpIcons = [];
+        $('.helpicon').each(function(){
+            helpIcons.push($(this));
+        });
+
+        return Promise.mapSeries(helpIcons, function(helpIcon, ii) {
+            let forAtt = helpIcon.attr('for');
+
+            if (typeof forAtt !== "undefined" && forAtt !== "") {
+                let dataSettingName = $('#' + forAtt).data("setting");
+
+                if (typeof dataSettingName === "undefined" || dataSettingName === "") {
+                    dataSettingName = $('#' + forAtt).data("setting-placeholder");
+                }
+
+                if (typeof dataSettingName !== "undefined" && dataSettingName !== "") {
+                    helpIcon.wrap('<a class="helpiconLink" href="https://github.com/iNavFlight/inav/blob/master/docs/Settings.md#' + dataSettingName + '" target="_blank"></a>');
+                }
+            }
+
+            return;
+        });
+    };
+
     return self;
 })();
diff --git a/tabs/advanced_tuning.html b/tabs/advanced_tuning.html
index cb86bdfe..3cf9f681 100644
--- a/tabs/advanced_tuning.html
+++ b/tabs/advanced_tuning.html
@@ -13,74 +13,74 @@
                         <div class="number">
                             <input type="number" id="launchIdleThr" data-unit="us" data-setting="nav_fw_launch_idle_thr" data-setting-multiplier="1" step="1" min="1000" max="2000" />
                             <label for="launchIdleThr"><span data-i18n="configurationLaunchIdleThr"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="configurationLaunchIdleThrHelp"></div>
+                            <div for="launchIdleThr" class="helpicon cf_tip" data-i18n_title="configurationLaunchIdleThrHelp"></div>
                         </div>
 
                         <div class="number">
                             <input type="number" id="launchIdleDelay" data-unit="ms" data-setting="nav_fw_launch_idle_motor_delay" data-setting-multiplier="1" step="1" min="0" max="60000" />
                             <label for="launchIdleDelay"><span data-i18n="configurationLaunchIdleDelay"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="configurationLaunchIdleDelayHelp"></div>
+                            <div for="launchIdleDelay" class="helpicon cf_tip" data-i18n_title="configurationLaunchIdleDelayHelp"></div>
                         </div>
 
                         <div class="number">
                             <input type="number" id="launchMaxAngle" data-unit="deg" data-setting="nav_fw_launch_max_angle" data-setting-multiplier="1" step="1" min="5" max="180" />
                             <label for="launchMaxAngle"><span data-i18n="configurationLaunchMaxAngle"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="configurationLaunchMaxAngleHelp"></div>
+                            <div for="launchMaxAngle" class="helpicon cf_tip" data-i18n_title="configurationLaunchMaxAngleHelp"></div>
                         </div>
                         <div class="number">
                             <input type="number" id="launchVelocity" data-unit="cms" data-setting="nav_fw_launch_velocity" data-setting-multiplier="1" step="1" min="100" max="10000" />
                             <label for="launchVelocity"><span data-i18n="configurationLaunchVelocity"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="configurationLaunchVelocityHelp"></div>
+                            <div for="launchVelocity" class="helpicon cf_tip" data-i18n_title="configurationLaunchVelocityHelp"></div>
                         </div>
                         <div class="number">
                             <input type="number" id="launchAccel" data-unit="cmss" data-setting="nav_fw_launch_accel" data-setting-multiplier="1" step="1" min="1000" max="20000" />
                             <label for="launchAccel"><span data-i18n="configurationLaunchAccel"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="configurationLaunchAccelHelp"></div>
+                            <div for="launchAccel" class="helpicon cf_tip" data-i18n_title="configurationLaunchAccelHelp"></div>
                         </div>
                         <div class="number">
                             <input type="number" id="launchDetectTime" data-unit="ms" data-setting="nav_fw_launch_detect_time" data-setting-multiplier="1" step="1" min="10" max="1000" />
                             <label for="launchDetectTime"><span data-i18n="configurationLaunchDetectTime"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="configurationLaunchDetectTimeHelp"></div>
+                            <div for="launchDetectTime" class="helpicon cf_tip" data-i18n_title="configurationLaunchDetectTimeHelp"></div>
                         </div>
                         <div class="number">
                             <input type="number" id="launchMotorDelay" data-unit="ms" data-setting="nav_fw_launch_motor_delay" data-setting-multiplier="1" step="1" min="0" max="5000" />
                             <label for="launchMotorDelay"><span data-i18n="configurationLaunchMotorDelay"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="configurationLaunchMotorDelayHelp"></div>
+                            <div for="launchMotorDelay" class="helpicon cf_tip" data-i18n_title="configurationLaunchMotorDelayHelp"></div>
                         </div>
                         <div class="number">
                             <input type="number" id="launchMinTime" data-unit="ms" data-setting="nav_fw_launch_min_time" data-setting-multiplier="1" step="1" min="0" max="60000" />
                             <label for="launchMinTime"><span data-i18n="configurationLaunchMinTime"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="configurationLaunchMinTimeHelp"></div>
+                            <div for="launchMinTime" class="helpicon cf_tip" data-i18n_title="configurationLaunchMinTimeHelp"></div>
                         </div>
                         <div class="number">
                             <input type="number" id="launchSpinupTime" data-unit="ms" data-setting="nav_fw_launch_spinup_time" data-setting-multiplier="1" step="1" min="0" max="1000" />
                             <label for="launchSpinupTime"><span data-i18n="configurationLaunchSpinupTime"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="configurationLaunchSpinupTimeHelp"></div>
+                            <div for="launchSpinupTime" class="helpicon cf_tip" data-i18n_title="configurationLaunchSpinupTimeHelp"></div>
                         </div>
                          <div class="number">
                             <input type="number" id="launchThr" data-unit="us" data-setting="nav_fw_launch_thr" data-setting-multiplier="1" step="1" min="1000" max="2000" />
                             <label for="launchThr"><span data-i18n="configurationLaunchThr"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="configurationLaunchThrHelp"></div>
+                            <div for="launchThr" class="helpicon cf_tip" data-i18n_title="configurationLaunchThrHelp"></div>
                         </div>
                         <div class="number">
                             <input type="number" id="launchClimbAngle" data-unit="deg" data-setting="nav_fw_launch_climb_angle" data-setting-multiplier="1" step="1" min="0" max="45" />
                             <label for="launchClimbAngle"><span data-i18n="configurationLaunchClimbAngle"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="configurationLaunchClimbAngleHelp"></div>
+                            <div for="launchClimbAngle" class="helpicon cf_tip" data-i18n_title="configurationLaunchClimbAngleHelp"></div>
                         </div>
                         <div class="number">
                             <input type="number" id="launchTimeout" data-unit="ms" data-setting="nav_fw_launch_timeout" data-setting-multiplier="1" step="1" min="0" max="60000" />
                             <label for="launchTimeout"><span data-i18n="configurationLaunchTimeout"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="configurationLaunchTimeoutHelp"></div>
+                            <div for="launchTimeout" class="helpicon cf_tip" data-i18n_title="configurationLaunchTimeoutHelp"></div>
                         </div>
                         <div class="number">
                             <input type="number" id="launchMaxAltitude" data-unit="cm" data-setting="nav_fw_launch_max_altitude" data-setting-multiplier="1" step="1" min="0" max="60000" />
                             <label for="launchMaxAltitude"><span data-i18n="configurationLaunchMaxAltitude"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="configurationLaunchMaxAltitudeHelp"></div>
+                            <div for="launchMaxAltitude" class="helpicon cf_tip" data-i18n_title="configurationLaunchMaxAltitudeHelp"></div>
                         </div>
                         <div class="number">
                             <input type="number" id="launchEndTime" data-unit="ms" data-setting="nav_fw_launch_end_time" data-setting-multiplier="1" step="1" min="0" max="5000" />
                             <label for="launchEndTime"><span data-i18n="configurationLaunchEndTime"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="configurationLaunchEndTimeHelp"></div>
+                            <div for="launchEndTime" class="helpicon cf_tip" data-i18n_title="configurationLaunchEndTimeHelp"></div>
                         </div>
                     </div>
                 </div>
@@ -93,22 +93,22 @@
                         <div class="number">
                             <input type="number" id="idlePower" data-unit="cw" data-setting="idle_power" data-setting-multiplier="1" step="1" min="0" max="65535" />
                             <label for="idlePower"><span data-i18n="idlePower"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="idlePowerHelp"></div>
+                            <div for="idlePower" class="helpicon cf_tip" data-i18n_title="idlePowerHelp"></div>
                         </div>
                         <div class="number">
                             <input type="number" id="cruisePower" data-unit="cw" data-setting="cruise_power" data-setting-multiplier="1" step="1" min="0" max="4294967295" />
                             <label for="cruisePower"><span data-i18n="cruisePower"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="cruisePowerHelp"></div>
+                            <div for="cruisePower" class="helpicon cf_tip" data-i18n_title="cruisePowerHelp"></div>
                         </div>
                         <div class="number">
                             <input type="number" id="cruiseSpeed" data-unit="cms" data-setting="nav_fw_cruise_speed" data-setting-multiplier="1" step="1" min="0" max="65535" />
                             <label for="cruiseSpeed"><span data-i18n="cruiseSpeed"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="cruiseSpeedHelp"></div>
+                            <div for="cruiseSpeed" class="helpicon cf_tip" data-i18n_title="cruiseSpeedHelp"></div>
                         </div>
                         <div class="number">
                             <input type="number" id="rthEnergyMargin" data-unit="percent" data-setting="rth_energy_margin" data-setting-multiplier="1" step="1" min="0" max="100" />
                             <label for="rthEnergyMargin"><span data-i18n="rthEnergyMargin"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="rthEnergyMarginHelp"></div>
+                            <div for="rthEnergyMargin" class="helpicon cf_tip" data-i18n_title="rthEnergyMarginHelp"></div>
                         </div>
                     </div>
                 </div>
@@ -130,13 +130,13 @@
                         <div class="number">
                             <input id="pitchToThrottle" type="number" data-setting="nav_fw_pitch2thr" data-setting-multiplier="1" step="1" min="0" max="100" />
                             <label for="pitchToThrottle"><span data-i18n="pitchToThrottle"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="pitchToThrottleHelp"></div>
+                            <div for="pitchToThrottle" class="helpicon cf_tip" data-i18n_title="pitchToThrottleHelp"></div>
                         </div>
 
                         <div class="checkbox">
                             <input type="checkbox" class="toggle update_preview" id="cruiseManualThrottle" data-setting="nav_fw_allow_manual_thr_increase"  data-live="true" />
                             <label for="cruiseManualThrottle"><span data-i18n="cruiseManualThrottleLabel"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="cruiseManualThrottleHelp"></div>
+                            <div for="cruiseManualThrottle" class="helpicon cf_tip" data-i18n_title="cruiseManualThrottleHelp"></div>
                         </div>
 
                         <div class="number">
@@ -152,37 +152,37 @@
                         <div class="number">
                             <input id="pitchToThrottleSmoothing" type="number" data-setting="nav_fw_pitch2thr_smoothing" data-setting-multiplier="1" step="0" min="0" max="9" />
                             <label for="pitchToThrottleSmoothing"><span data-i18n="pitchToThrottleSmoothing"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="pitchToThrottleSmoothingHelp"></div>
+                            <div for="pitchToThrottleSmoothing" class="helpicon cf_tip" data-i18n_title="pitchToThrottleSmoothingHelp"></div>
                         </div>
 
                         <div class="number">
                             <input id="pitchToThrottleThreshold" type="number" data-unit="decideg" data-setting="nav_fw_pitch2thr_threshold" data-setting-multiplier="1" step="1" min="0" max="900" />
                             <label for="pitchToThrottleThreshold"><span data-i18n="pitchToThrottleThreshold"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="pitchToThrottleThresholdHelp"></div>
+                            <div for="pitchToThrottleThreshold" class="helpicon cf_tip" data-i18n_title="pitchToThrottleThresholdHelp"></div>
                         </div>
 
                         <div class="number">
                             <input type="number" id="cruiseYawRate" data-setting="nav_fw_cruise_yaw_rate" data-setting-multiplier="1" step="1" min="0" max="60" />
                             <label for="cruiseYawRate"><span data-i18n="cruiseYawRateLabel"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="cruiseYawRateHelp"></div>
+                            <div for="cruiseYawRate" class="helpicon cf_tip" data-i18n_title="cruiseYawRateHelp"></div>
                         </div>
 
                         <div class="number">
                             <input id="maxBankAngle" type="number" data-unit="deg" data-setting="nav_fw_bank_angle" data-setting-multiplier="1" step="1" min="5" max="80" />
                             <label for="maxBankAngle"><span data-i18n="maxBankAngle"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="maxBankAngleHelp"></div>
+                            <div for="maxBankAngle" class="helpicon cf_tip" data-i18n_title="maxBankAngleHelp"></div>
                         </div>
 
                         <div class="number">
                             <input id="maxClimbAngle" type="number" data-unit="deg" data-setting="nav_fw_climb_angle" data-setting-multiplier="1" step="1" min="5" max="80" />
                             <label for="maxClimbAngle"><span data-i18n="maxClimbAngle"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="maxClimbAngleHelp"></div>
+                            <div for="maxClimbAngle" class="helpicon cf_tip" data-i18n_title="maxClimbAngleHelp"></div>
                         </div>
 
                         <div class="number">
                             <input id="maxDiveAngle" type="number" data-unit="deg" data-setting="nav_fw_dive_angle" data-setting-multiplier="1" step="1" min="5" max="80" />
                             <label for="maxDiveAngle"><span data-i18n="maxDiveAngle"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="maxDiveAngleHelp"></div>
+                            <div for="maxDiveAngle" class="helpicon cf_tip" data-i18n_title="maxDiveAngleHelp"></div>
                         </div>
 
                         <div class="number">
@@ -193,13 +193,13 @@
                         <div class="select">
                             <select id="loiterDirection" data-setting="fw_loiter_direction"></select>
                             <label for="loiterDirection"><span data-i18n="loiterDirectionLabel"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="loiterDirectionHelp"></div>
+                            <div for="loiterDirection" class="helpicon cf_tip" data-i18n_title="loiterDirectionHelp"></div>
                         </div>
 
                         <div class="number">
                             <input type="number" id="controlSmoothness" data-setting="nav_fw_control_smoothness" data-setting-multiplier="1" step="1" min="0" max="9" />
                             <label for="controlSmoothness"><span data-i18n="controlSmoothness"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="controlSmoothnessHelp"></div>
+                            <div for="controlSmoothness" class="helpicon cf_tip" data-i18n_title="controlSmoothnessHelp"></div>
                         </div>
 
                     </div>
@@ -225,7 +225,7 @@
                         <div class="number">
                             <input id="default-auto-speed" type="number" data-unit="cms" data-setting="nav_auto_speed" data-setting-multiplier="1" step="1" min="10" max="2000" />
                             <label for="default-auto-speed"><span data-i18n="posholdDefaultSpeed"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="posholdDefaultSpeedHelp"></div>
+                            <div for="default-auto-speed" class="helpicon cf_tip" data-i18n_title="posholdDefaultSpeedHelp"></div>
                         </div>
                         <div class="number">
                             <input id="max-auto-speed" type="number" data-unit="cms" data-setting="nav_max_auto_speed" data-setting-multiplier="1" step="1" min="10" max="2000" />
@@ -234,12 +234,12 @@
                         <div class="number">
                             <input id="max-manual-speed" data-unit="cms" type="number" data-setting="nav_manual_speed" data-setting-multiplier="1" step="1" min="10" max="2000" />
                             <label for="max-manual-speed"><span data-i18n="posholdMaxManualSpeed"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="posholdMaxManualSpeedHelp"></div>
+                            <div for="max-manual-speed" class="helpicon cf_tip" data-i18n_title="posholdMaxManualSpeedHelp"></div>
                         </div>
                         <div class="number">
                             <input id="max-bank-angle" type="number" data-unit="deg" data-setting="nav_mc_bank_angle" data-setting-multiplier="1" step="1" min="15" max="45" />
                             <label for="max-bank-angle"><span data-i18n="posholdMaxBankAngle"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="posholdMaxBankAngleHelp"></div>
+                            <div for="max-bank-angle" class="helpicon cf_tip" data-i18n_title="posholdMaxBankAngleHelp"></div>
                         </div>
                         <div class="checkbox">
                             <input type="checkbox" class="toggle update_preview" id="use-mid-throttle" data-setting="nav_use_midthr_for_althold" data-live="true" />
@@ -252,7 +252,7 @@
                         <div class="checkbox">
                             <input id="wp-slowdown" type="checkbox" class="toggle update_preview" data-setting="nav_mc_wp_slowdown" data-live="true" />
                             <label for="wp-slowdown"><span data-i18n="mcWpSlowdown"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="mcWpSlowdownHelp"></div>
+                            <div for="wp-slowdown" class="helpicon cf_tip" data-i18n_title="mcWpSlowdownHelp"></div>
                         </div>
                     </div>
                 </div>
@@ -268,49 +268,49 @@
                         <div class="number">
                             <input id="brakingSpeedThreshold" type="number" data-unit="cms" data-setting="nav_mc_braking_speed_threshold" data-setting-multiplier="1" step="1" min="0" max="1000" />
                             <label for="brakingSpeedThreshold"><span data-i18n="brakingSpeedThreshold"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="brakingSpeedThresholdTip"></div>
+                            <div for="brakingSpeedThreshold" class="helpicon cf_tip" data-i18n_title="brakingSpeedThresholdTip"></div>
                         </div>
 
                         <div class="number">
                             <input id="brakingDisengageSpeed" type="number" data-unit="cms" data-setting="nav_mc_braking_disengage_speed" data-setting-multiplier="1" step="1" min="0" max="1000" />
                             <label for="brakingDisengageSpeed"><span data-i18n="brakingDisengageSpeed"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="brakingDisengageSpeedTip"></div>
+                            <div for="brakingDisengageSpeed" class="helpicon cf_tip" data-i18n_title="brakingDisengageSpeedTip"></div>
                         </div>
 
                         <div class="number">
                             <input id="brakingTimeout" type="number" data-unit="ms" data-setting="nav_mc_braking_timeout" data-setting-multiplier="1" step="1" min="100" max="5000" />
                             <label for="brakingTimeout"><span data-i18n="brakingTimeout"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="brakingTimeoutTip"></div>
+                            <div for="brakingTimeout" class="helpicon cf_tip" data-i18n_title="brakingTimeoutTip"></div>
                         </div>
 
                         <div class="number">
                             <input id="brakingBoostFactor" type="number" data-setting="nav_mc_braking_boost_factor" data-setting-multiplier="1" step="1" min="0" max="200" />
                             <label for="brakingBoostFactor"><span data-i18n="brakingBoostFactor"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="brakingBoostFactorTip"></div>
+                            <div for="brakingBoostFactor" class="helpicon cf_tip" data-i18n_title="brakingBoostFactorTip"></div>
                         </div>
 
                         <div class="number">
                             <input id="brakingBoostTimeout" type="number" data-unit="ms" data-setting="nav_mc_braking_boost_timeout" data-setting-multiplier="1" step="1" min="0" max="5000" />
                             <label for="brakingBoostTimeout"><span data-i18n="brakingBoostTimeout"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="brakingBoostTimeoutTip"></div>
+                            <div for="brakingBoostTimeout" class="helpicon cf_tip" data-i18n_title="brakingBoostTimeoutTip"></div>
                         </div>
 
                         <div class="number">
                             <input id="brakingBoostSpeedThreshold" type="number" data-unit="cms"data-setting="nav_mc_braking_boost_speed_threshold" data-setting-multiplier="1" step="1" min="100" max="1000" />
                             <label for="brakingBoostSpeedThreshold"><span data-i18n="brakingBoostSpeedThreshold"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="brakingBoostSpeedThresholdTip"></div>
+                            <div for="brakingBoostSpeedThreshold" class="helpicon cf_tip" data-i18n_title="brakingBoostSpeedThresholdTip"></div>
                         </div>
 
                         <div class="number">
                             <input id="brakingBoostDisengageSpeed" type="number" data-unit="cms" data-setting="nav_mc_braking_boost_disengage_speed" data-setting-multiplier="1" step="1" min="100" max="1000" />
                             <label for="brakingBoostDisengageSpeed"><span data-i18n="brakingBoostDisengageSpeed"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="brakingBoostDisengageSpeedTip"></div>
+                            <div for="brakingBoostDisengageSpeed" class="helpicon cf_tip" data-i18n_title="brakingBoostDisengageSpeedTip"></div>
                         </div>
 
                         <div class="number">
                             <input id="brakingBankAngle" type="number" data-unit="deg" data-setting="nav_mc_braking_bank_angle" data-setting-multiplier="1" step="1" min="15" max="60" />
                             <label for="brakingBankAngle"><span data-i18n="brakingBankAngle"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="brakingBankAngleTip"></div>
+                            <div for="brakingBankAngle" class="helpicon cf_tip" data-i18n_title="brakingBankAngleTip"></div>
                         </div>
 
                     </div>
@@ -339,19 +339,19 @@
                         <div class="number">
                             <input type="number" id="rthAltitude" data-unit="cm" data-setting="nav_rth_altitude" data-setting-multiplier="1" step="1" min="0" max="65000" />
                             <label for="rthAltitude"><span data-i18n="rthAltitude"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="rthAltitudeHelp"></div>
+                            <div for="rthAltitude" class="helpicon cf_tip" data-i18n_title="rthAltitudeHelp"></div>
                         </div>
 
                          <div class="number">
                             <input type="number" id="rthHomeAltitude" data-unit="cm" data-setting="nav_rth_home_altitude" data-setting-multiplier="1" step="1" min="0" max="65000" />
                             <label for="rthHomeAltitude"><span data-i18n="rthHomeAltitudeLabel"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="rthHomeAltitudeHelp"></div>
+                            <div for="rthHomeAltitude" class="helpicon cf_tip" data-i18n_title="rthHomeAltitudeHelp"></div>
                         </div>
 
                         <div class="select">
                             <select id="rth-climb-first" data-setting="nav_rth_climb_first"></select>
                             <label for="rth-climb-first"><span data-i18n="rthClimbFirst"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="rthClimbFirstHelp"></div>
+                            <div for="rth-climb-first" class="helpicon cf_tip" data-i18n_title="rthClimbFirstHelp"></div>
                         </div>
 
                         <div class="checkbox">
@@ -362,7 +362,7 @@
                         <div class="checkbox">
                             <input type="checkbox" class="toggle update_preview" id="rthAltControlOverride" data-setting="nav_rth_alt_control_override" data-live="true" />
                             <label for="rthAltControlOverride"><span data-i18n="rthAltControlOverride"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="rthAltControlOverrideHelp"></div>
+                            <div for="rthAltControlOverride" class="helpicon cf_tip" data-i18n_title="rthAltControlOverrideHelp"></div>
                         </div>
 
                         <div class="checkbox notFixedWingTuning">
@@ -378,13 +378,13 @@
                         <div class="number">
                             <input id="rth-min-distance" type="number" data-unit="cm" data-setting="nav_min_rth_distance" data-setting-multiplier="1" step="1" min="0" max="5000" />
                             <label for="rth-min-distance"><span data-i18n="minRthDistance"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="minRthDistanceHelp"></div>
+                            <div for="rth-min-distance" class="helpicon cf_tip" data-i18n_title="minRthDistanceHelp"></div>
                         </div>
 
                         <div class="number">
                             <input id="rthAbortThreshold" type="number" data-unit="cm" data-setting="nav_rth_abort_threshold" data-setting-multiplier="1" step="1" min="0" max="65000" />
                             <label for="rthAbortThreshold"><span data-i18n="rthAbortThreshold"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="rthAbortThresholdHelp"></div>
+                            <div for="rthAbortThreshold" class="helpicon cf_tip" data-i18n_title="rthAbortThresholdHelp"></div>
                         </div>
 
                     </div>
@@ -402,13 +402,13 @@
                         <div class="number">
                             <input type="number" id="navManualClimbRate" data-unit="v-cms" data-setting="nav_manual_climb_rate" data-setting-multiplier="1" step="1" min="10" max="2000" />
                             <label for="navManualClimbRate"><span data-i18n="navManualClimbRate"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="navManualClimbRateHelp"></div>
+                            <div for="navManualClimbRate" class="helpicon cf_tip" data-i18n_title="navManualClimbRateHelp"></div>
                         </div>
 
                         <div class="number">
                             <input type="number" id="navAutoClimbRate" data-unit="v-cms" data-setting="nav_auto_climb_rate" data-setting-multiplier="1" step="1" min="10" max="2000" />
                             <label for="navAutoClimbRate"><span data-i18n="navAutoClimbRate"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="navAutoClimbRateHelp"></div>
+                            <div for="navAutoClimbRate" class="helpicon cf_tip" data-i18n_title="navAutoClimbRateHelp"></div>
                         </div>
                     </div>
                 </div>
@@ -422,13 +422,13 @@
                         <div class="number">
                             <input type="number" id="waypointRadius" data-unit="cm" data-setting="nav_wp_radius" data-setting-multiplier="1" step="1" min="10" max="10000" />
                             <label for="waypointRadius"><span data-i18n="waypointRadius"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="waypointRadiusHelp"></div>
+                            <div for="waypointRadius" class="helpicon cf_tip" data-i18n_title="waypointRadiusHelp"></div>
                         </div>
 
                         <div class="number">
                             <input type="number" id="waypointSafeDistance" data-unit="cm" data-setting="nav_wp_safe_distance" data-setting-multiplier="1" step="1" min="0" max="65000" />
                             <label for="waypointSafeDistance"><span data-i18n="waypointSafeDistance"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="waypointSafeDistanceHelp"></div>
+                            <div for="waypointSafeDistance" class="helpicon cf_tip" data-i18n_title="waypointSafeDistanceHelp"></div>
                         </div>
 
                     </div>
@@ -442,12 +442,12 @@
                         <div class="number">
                             <input id="landMaxAltVspd" type="number" data-unit="v-cms" data-setting="nav_land_maxalt_vspd" data-setting-multiplier="1" step="1" min="100" max="2000" />
                             <label for="landMaxAltVspd"><span data-i18n="landMaxAltVspd"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="landMaxAltVspdHelp"></div>
+                            <div for="landMaxAltVspd" class="helpicon cf_tip" data-i18n_title="landMaxAltVspdHelp"></div>
                         </div>
                         <div class="number">
                             <input id="landSlowdownMaxAlt" type="number" data-unit="cm" data-setting="nav_land_slowdown_maxalt" data-setting-multiplier="1" step="1" min="500" max="4000" />
                             <label for="landSlowdownMaxAlt"><span data-i18n="landSlowdownMaxAlt"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="landSlowdownMaxAltHelp"></div>
+                            <div for="landSlowdownMaxAlt" class="helpicon cf_tip" data-i18n_title="landSlowdownMaxAltHelp"></div>
                         </div>
                         <div class="number">
                             <input id="landSlowdownMinAlt" type="number" data-unit="cm" data-setting="nav_land_slowdown_minalt" data-setting-multiplier="1" step="1" min="50" max="1000" />
@@ -456,7 +456,7 @@
                         <div class="number">
                             <input id="landMinAltVspd" type="number" data-unit="v-cms" data-setting="nav_land_minalt_vspd" data-setting-multiplier="1" step="1" min="50" max="500" />
                             <label for="landMinAltVspd"><span data-i18n="landMinAltVspd"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="landMinAltVspdHelp"></div>
+                            <div for="landMinAltVspd" class="helpicon cf_tip" data-i18n_title="landMinAltVspdHelp"></div>
                         </div>
                         <div class="number">
                             <input id="emergencyDescentRate" type="number" data-unit="cms" data-setting="nav_emerg_landing_speed" data-setting-multiplier="1" step="1" min="100" max="2000" />
diff --git a/tabs/configuration.html b/tabs/configuration.html
index a0ec051d..0c7691be 100644
--- a/tabs/configuration.html
+++ b/tabs/configuration.html
@@ -49,7 +49,7 @@
                         <label for="i2c_speed">
                             <span data-i18n="configurationI2cSpeed"></span>
                         </label>
-                        <div class="helpicon cf_tip" data-i18n_title="configurationI2cSpeedHelp"></div>
+                        <div for="i2c_speed" class="helpicon cf_tip" data-i18n_title="configurationI2cSpeedHelp"></div>
                     </div>
 
                 </div>
@@ -106,14 +106,14 @@
                         </label>
                     </div>
                     <div class="select">
-                        <select id="voltagesource" class="voltagesource">
+                        <select id="voltagesource" class="voltagesource" data-setting-placeholder="bat_voltage_src">
                             <option value="0">Raw</option>
                             <option value="1">Sag compensated</option>
                         </select>
                         <label for="voltagesource">
                             <span data-i18n="configurationVoltageSource"></span>
                         </label>
-                        <div class="helpicon cf_tip" data-i18n_title="configurationVoltageSourceHelp"></div>
+                        <div for="voltagesource" class="helpicon cf_tip" data-i18n_title="configurationVoltageSourceHelp"></div>
                     </div>
                     
                     <div class="number">
@@ -136,11 +136,11 @@
                         </label>
                     </div>
                     <div class="number">
-                        <input type="number" id="currentscale" name="currentscale" step="1" min="-10000" max="10000" />
+                        <input type="number" id="currentscale" name="currentscale" step="1" min="-10000" max="10000" data-setting-placeholder="current_meter_scale" />
                         <label for="currentscale">
                             <span data-i18n="configurationCurrentScale"></span>
                         </label>
-                        <div class="helpicon cf_tip" data-i18n_title="configurationCurrentScaleHelp"></div>
+                        <div for="currentscale" class="helpicon cf_tip" data-i18n_title="configurationCurrentScaleHelp"></div>
                     </div>
                     <div class="number">
                         <input type="number" id="currentoffset" name="currentoffset" step="0.1" min="-3276.8" max="3276.7" />
@@ -163,14 +163,14 @@
                 </div>
                 <div class="spacer_box">
                     <div class="number">
-                        <input type="number" class="batteryProfileHighlight" id="cells" name="cells" step="1" min="0" max="12" />
+                        <input type="number" class="batteryProfileHighlight" id="cells" name="cells" step="1" min="0" max="12" data-setting-placeholder="bat_cells" />
                         <label for="cells"><span data-i18n="configurationBatteryCells"></span></label>
-                        <div class="helpicon cf_tip" data-i18n_title="configurationBatteryCellsHelp"></div>
+                        <div for="cells" class="helpicon cf_tip" data-i18n_title="configurationBatteryCellsHelp"></div>
                     </div>
                     <div class="number">
-                        <input type="number" class="batteryProfileHighlight" id="celldetectvoltage" name="celldetectvoltage" step="0.01" min="1" max="5" />
+                        <input type="number" class="batteryProfileHighlight" id="celldetectvoltage" name="celldetectvoltage" step="0.01" min="1" max="5" data-setting-placeholder="vbat_cell_detect_voltage" />
                         <label for="celldetectvoltage"><span data-i18n="configurationBatteryCellDetectVoltage"></span></label>
-                        <div class="helpicon cf_tip" data-i18n_title="configurationBatteryCellDetectVoltageHelp"></div>
+                        <div for="celldetectvoltage" class="helpicon cf_tip" data-i18n_title="configurationBatteryCellDetectVoltageHelp"></div>
                     </div>
                     <div class="number">
                         <input type="number" class="batteryProfileHighlight" id="mincellvoltage" name="mincellvoltage" step="0.01" min="1" max="5" />
@@ -243,15 +243,15 @@
                     </div>
 
                     <div class="select">
-                        <select id="vtx_power"></select>
+                        <select id="vtx_power" data-setting-placeholder="vtx_power"></select>
                         <label for="vtx_power"><span data-i18n="configurationVTXPower"></span></label>
-                        <div class="helpicon cf_tip" data-i18n_title="configurationVTXPowerHelp"></div>
+                        <div for="vtx_power" class="helpicon cf_tip" data-i18n_title="configurationVTXPowerHelp"></div>
                     </div>
 
                     <div class="select">
-                        <select id="vtx_low_power_disarm"></select>
-                        <label for="vtx_power"><span data-i18n="configurationVTXLowerPowerDisarm"></span></label>
-                        <div class="helpicon cf_tip" data-i18n_title="configurationVTXLowerPowerDisarmHelp"></div>
+                        <select id="vtx_low_power_disarm" data-setting-placeholder="vtx_low_power_disarm"></select>
+                        <label for="vtx_low_power_disarm"><span data-i18n="configurationVTXLowerPowerDisarm"></span></label>
+                        <div for="vtx_low_power_disarm" class="helpicon cf_tip" data-i18n_title="configurationVTXLowerPowerDisarmHelp"></div>
                     </div>
                 </div>
             </div>
diff --git a/tabs/failsafe.html b/tabs/failsafe.html
index 70fd7ce5..277ee236 100644
--- a/tabs/failsafe.html
+++ b/tabs/failsafe.html
@@ -7,9 +7,9 @@
             </div>
             <div class="spacer_box">
                 <div class="number">
-                     <input type="number" name="failsafe_delay" data-unit="dsec" data-setting="failsafe_delay" min="0" max="200" />
+                     <input id="failsafeDelay" type="number" name="failsafe_delay" data-unit="dsec" data-setting="failsafe_delay" min="0" max="200" />
                      <label><span data-i18n="failsafeDelayItem"></span></label>
-                    <div class="helpicon cf_tip" data-i18n_title="failsafeDelayHelp"></div>
+                    <div for="failsafeDelay" class="helpicon cf_tip" data-i18n_title="failsafeDelayHelp"></div>
                 </div>
                 <!-- radio buttons  -->
                 <div class="subline" data-i18n="failsafeSubTitle1"></div>
@@ -28,9 +28,9 @@
                             <label><span data-i18n="failsafeThrottleItem"></span></label>
                         </div>
                         <div class="number">
-                            <input type="number" name="failsafe_off_delay" data-setting="failsafe_off_delay" data-unit="dsec" min="0" max="200" />
+                            <input id="failsafeOffDelay" type="number" name="failsafe_off_delay" data-setting="failsafe_off_delay" data-unit="dsec" min="0" max="200" />
                             <label><span data-i18n="failsafeOffDelayItem"></span></label>
-                            <div class="helpicon cf_tip" data-i18n_title="failsafeOffDelayHelp"></div>
+                            <div for="failsafeOffDelay" class="helpicon cf_tip" data-i18n_title="failsafeOffDelayHelp"></div>
                         </div>
                     </div>
                 </div>
@@ -51,19 +51,19 @@
                     </div>
                     <label for="failsafe_use_minimum_distance"><span data-i18n="failsafeUseMinimumDistanceItem"></span>
                     </label>
-                    <div class="helpicon cf_tip" data-i18n_title="failsafeUseMinimumDistanceHelp"></div>
+                    <div for="failsafe_use_minimum_distance" class="helpicon cf_tip" data-i18n_title="failsafeUseMinimumDistanceHelp"></div>
                 </div>
 
                 <div class="number" id="failsafe_min_distance_elements">
                     <input class="minimumDistance" id="failsafe_min_distance" type="number" data-unit="cm" data-setting="failsafe_min_distance" data-setting-multiplier="1" step="1" min="0" max="65000" />
                     <label for="failsafe_min_distance"><span data-i18n="failsafeMinDistanceItem"></span></label>
-                    <div class="helpicon cf_tip" data-i18n_title="failsafeMinDistanceHelp"></div>
+                    <div for="failsafe_min_distance" class="helpicon cf_tip" data-i18n_title="failsafeMinDistanceHelp"></div>
                 </div>
 
                 <div class="select" id="failsafe_min_distance_procedure_elements">
                     <select id="failsafe_min_distance_procedure" class="minimumDistance" data-setting="failsafe_min_distance_procedure"></select>
                     <label for="failsafe_min_distance_procedure"> <span data-i18n="failsafeMinDistanceProcedureItem"></span></label>
-                    <div class="helpicon cf_tip" data-i18n_title="failsafeMinDistanceProcedureHelp"></div>
+                    <div for="failsafe_min_distance_procedure" class="helpicon cf_tip" data-i18n_title="failsafeMinDistanceProcedureHelp"></div>
                 </div>
             </div>
         </div>
diff --git a/tabs/gps.html b/tabs/gps.html
index 562dc785..e809bd04 100644
--- a/tabs/gps.html
+++ b/tabs/gps.html
@@ -16,58 +16,40 @@
                         </div>
 
                         <div class="checkbox">
-                            <input type="checkbox" data-bit="7" class="feature toggle" name="GPS" title="GPS"
-                                id="feature-7">
-                            <label for="feature-7">
-                                <span data-i18n="featureGPS"></span>
-                            </label>
-                            <div class="helpicon cf_tip" data-i18n_title="featureGPSTip"></div>
+                            <input type="checkbox" data-bit="7" class="feature toggle" name="GPS" title="GPS" id="feature-7">
+                            <label for="feature-7"><span data-i18n="featureGPS"></span></label>
+                            <div for="feature-7" class="helpicon cf_tip" data-i18n_title="featureGPSTip"></div>
                         </div>
 
                         <div class="select">
                             <select id="gps_protocol" class="gps_protocol">
                                 <!-- list generated here -->
                             </select>
-                            <label for="gps_protocol">
-                                <span data-i18n="configurationGPSProtocol"></span>
-                            </label>
+                            <label for="gps_protocol"><span data-i18n="configurationGPSProtocol"></span></label>
                         </div>
                         <div class="select">
                             <select id="gps_ubx_sbas" class="gps_ubx_sbas">
                                 <!-- list generated here -->
                             </select>
-                            <label for="gps_ubx_sbas">
-                                <span data-i18n="configurationGPSubxSbas"></span>
-                            </label>
+                            <label for="gps_ubx_sbas"><span data-i18n="configurationGPSubxSbas"></span></label>
                         </div>
                         <div class="number is-hidden">
-                            <input type="number" id="mag_declination" name="mag_declination" step="0.1" min="-180"
-                                max="180" />
-                            <label for="mag_declination">
-                                <span data-i18n="configurationMagDeclination"></span>
-                            </label>
+                            <input type="number" id="mag_declination" name="mag_declination" step="0.1" min="-180" max="180" />
+                            <label for="mag_declination"><span data-i18n="configurationMagDeclination"></span></label>
                         </div>
                         <div class="checkbox">
-                            <input type="checkbox" class="toggle update_preview" data-setting="gps_ublox_use_galileo"
-                                data-live="true">
-                            <label for="gps_use_galileo">
-                                <span data-i18n="configurationGPSUseGalileo"></span>
-                            </label>
+                            <input type="checkbox" class="toggle update_preview" data-setting="gps_ublox_use_galileo" data-live="true">
+                            <label for="gps_use_galileo"><span data-i18n="configurationGPSUseGalileo"></span></label>
                         </div>
                         <div class="number">
-                            <input type="number" id="tzOffset" data-setting="tz_offset" data-setting-multiplier="1"
-                                step="1" min="-1440" max="1440" />
-                            <label for="tzOffset">
-                                <span data-i18n="tzOffset"></span>
-                            </label>
-                            <div class="helpicon cf_tip" data-i18n_title="tzOffsetHelp"></div>
+                            <input type="number" id="tzOffset" data-setting="tz_offset" data-setting-multiplier="1" step="1" min="-1440" max="1440" />
+                            <label for="tzOffset"><span data-i18n="tzOffset"></span></label>
+                            <div for="tzOffset" class="helpicon cf_tip" data-i18n_title="tzOffsetHelp"></div>
                         </div>
                         <div class="select">
                             <select id="tzAutomaticDST" data-setting="tz_automatic_dst"></select>
-                            <label for="tzAutomaticDST">
-                                <span data-i18n="tzAutomaticDST"></span>
-                            </label>
-                            <div class="helpicon cf_tip" data-i18n_title="tzAutomaticDSTHelp"></div>
+                            <label for="tzAutomaticDST"><span data-i18n="tzAutomaticDST"></span></label>
+                            <div for="tzAutomaticDST" class="helpicon cf_tip" data-i18n_title="tzAutomaticDSTHelp"></div>
                         </div>
                     </div>
                 </div>
diff --git a/tabs/osd.html b/tabs/osd.html
index 774aaff6..c1dffde7 100644
--- a/tabs/osd.html
+++ b/tabs/osd.html
@@ -58,9 +58,9 @@
                                 <span data-i18n="osd_craft_name"></span>
                             </label>
                             <label class="units">
-                                <select id="unit_mode" name="unit_mode"></select>
+                                <select id="unit_mode" name="unit_mode" data-setting-placeholder="osd_units"></select>
                                 <span data-i18n="osd_units"></span>
-                                <div class="helpicon cf_tip" style="margin-top: 2px"></div>
+                                <div for="unit_mode" class="helpicon cf_tip" style="margin-top: 2px"></div>
                             </label>
                             <label>
                                 <select class="update_preview" data-setting="osd_main_voltage_decimals" data-live="true"></select>
@@ -74,19 +74,19 @@
                                 <select class="update_preview" data-setting="osd_coordinate_digits" data-live="true"></select>
                                 <span data-i18n="osd_coordinate_digits"></span>
                             </label>
-                            <div class="helpicon cf_tip" data-i18n_title="osdSettingPLUS_CODE_DIGITS_HELP"></div>
+                            <div for="plusCodeDigits" class="helpicon cf_tip" data-i18n_title="osdSettingPLUS_CODE_DIGITS_HELP"></div>
                             <label>
-                                <select class="update_preview" data-setting="osd_plus_code_digits" data-live="true"></select>
+                                <select id="plusCodeDigits" class="update_preview" data-setting="osd_plus_code_digits" data-live="true"></select>
                                 <span data-i18n="osd_plus_code_digits"></span>
                             </label>
-                            <div class="helpicon cf_tip" data-i18n_title="osdSettingPLUS_CODE_SHORT_HELP"></div>
+                            <div for="plusCodeShort" class="helpicon cf_tip" data-i18n_title="osdSettingPLUS_CODE_SHORT_HELP"></div>
                             <label>
-                                <select class="update_preview" data-setting="osd_plus_code_short" data-live="true"></select>
+                                <select id="plusCodeShort" class="update_preview" data-setting="osd_plus_code_short" data-live="true"></select>
                                 <span data-i18n="osd_plus_code_short"></span> 
                             </label>
-                            <div class="helpicon cf_tip" data-i18n_title="osd_esc_rpm_precision_help"></div>
+                            <div for="rpmPrecision" class="helpicon cf_tip" data-i18n_title="osd_esc_rpm_precision_help"></div>
                             <label>
-                                <select class="update_preview" data-setting="osd_esc_rpm_precision" data-live="true"></select>
+                                <select id="rpmPrecision" class="update_preview" data-setting="osd_esc_rpm_precision" data-live="true"></select>
                                 <span data-i18n="osd_esc_rpm_precision"></span> 
                             </label>
                             <label>
@@ -101,9 +101,9 @@
                                 <select class="update_preview" data-setting="osd_right_sidebar_scroll" data-live="true"></select>
                                 <span data-i18n="osd_right_sidebar_scroll"></span>
                             </label>
-                            <div class="helpicon cf_tip" data-i18n_title="osdSettingCRSF_LQ_FORMAT_HELP"></div>
+                            <div for="crsfLQFormat" class="helpicon cf_tip" data-i18n_title="osdSettingCRSF_LQ_FORMAT_HELP"></div>
                             <label>
-                                <select class="update_preview" data-setting="osd_crsf_lq_format" data-live="true"></select>
+                                <select id="crsfLQFormat" class="update_preview" data-setting="osd_crsf_lq_format" data-live="true"></select>
                                 <span data-i18n="osd_crsf_lq_format"></span>
                             </label>
                             <label>
@@ -134,32 +134,32 @@
                             <input id="osd_alt_alarm" data-setting="osd_alt_alarm" data-unit="m" data-setting-multiplier="1" type="number" data-step="1" />
                             <span data-i18n="osd_alt_alarm"></span>
                         </label>
-                        <div class="helpicon cf_tip" data-i18n_title="osdAlarmMAX_NEG_ALTITUDE_HELP"></div>
+                        <div for="osd_neg_alt_alarm" class="helpicon cf_tip" data-i18n_title="osdAlarmMAX_NEG_ALTITUDE_HELP"></div>
                         <label for="osd_neg_alt_alarm">
                             <input id="osd_neg_alt_alarm" data-setting="osd_neg_alt_alarm" data-unit="m" data-setting-multiplier="1" type="number" data-step="1" />
                             <span data-i18n="osd_neg_alt_alarm"></span>
                         </label>
-                        <div class="helpicon cf_tip" data-i18n_title="osdAlarmDIST_HELP"></div>
+                        <div for="osd_dist_alarm" class="helpicon cf_tip" data-i18n_title="osdAlarmDIST_HELP"></div>
                         <label for="osd_dist_alarm">
                             <input id="osd_dist_alarm" data-setting="osd_dist_alarm" data-unit="m-lrg" data-setting-multiplier="1" type="number" data-step="1" />
                             <span data-i18n="osd_dist_alarm"></span>
                         </label>
-                        <div class="helpicon cf_tip" data-i18n_title="osdAlarmGFORCE_HELP"></div>
+                        <div for="osd_gforce_alarm" class="helpicon cf_tip" data-i18n_title="osdAlarmGFORCE_HELP"></div>
                         <label for="osd_gforce_alarm">
                             <input id="osd_gforce_alarm" data-setting="osd_gforce_alarm" data-setting-multiplier="1" type="number" data-step="0.1" />
                             <span data-i18n="osd_gforce_alarm"></span>
                         </label>
-                        <div class="helpicon cf_tip" data-i18n_title="osdAlarmGFORCE_AXIS_MIN_HELP"></div>
+                        <div for="osd_gforce_axis_alarm_min" class="helpicon cf_tip" data-i18n_title="osdAlarmGFORCE_AXIS_MIN_HELP"></div>
                         <label for="osd_gforce_axis_alarm_min">
                             <input id="osd_gforce_axis_alarm_min" data-setting="osd_gforce_axis_alarm_min" data-setting-multiplier="1" type="number" data-step="0.1" />
                             <span data-i18n="osd_gforce_axis_alarm_min"></span>
                         </label>
-                        <div class="helpicon cf_tip" data-i18n_title="osdAlarmGFORCE_AXIS_MAX_HELP"></div>
+                        <div for="osd_gforce_axis_alarm_max" class="helpicon cf_tip" data-i18n_title="osdAlarmGFORCE_AXIS_MAX_HELP"></div>
                         <label for="osd_gforce_axis_alarm_max">
                             <input id="osd_gforce_axis_alarm_max" data-setting="osd_gforce_axis_alarm_max" data-setting-multiplier="1" type="number" data-step="0.1" />
                             <span data-i18n="osd_gforce_axis_alarm_max"></span>
                         </label>
-                        <div class="helpicon cf_tip" data-i18n_title="osdAlarmCURRENT_HELP"></div>
+                        <div for="osd_current_alarm" class="helpicon cf_tip" data-i18n_title="osdAlarmCURRENT_HELP"></div>
                         <label for="osd_current_alarm">
                             <input id="osd_current_alarm" data-setting="osd_current_alarm" data-setting-multiplier="1" type="number" data-step="1" />
                             <span data-i18n="osd_current_alarm"></span>
@@ -188,17 +188,17 @@
                             <input id="esc_temp_alarm_max" data-setting="osd_esc_temp_alarm_max" data-unit="decidegc" data-setting-multiplier="1" type="number" data-step="0.5" />
                             <span data-i18n="osd_esc_temp_alarm_max"></span>
                         </label>
-                        <div class="helpicon cf_tip" data-i18n_title="osdalarmLQ_HELP"></div>
+                        <div for="link_quality_alarm" class="helpicon cf_tip" data-i18n_title="osdalarmLQ_HELP"></div>
                         <label for="link_quality_alarm">
                             <input id="link_quality_alarm" data-setting="osd_link_quality_alarm" data-setting-multiplier="1" type="number" data-step="1" />
                             <span data-i18n="osd_link_quality_alarm"></span>
                         </label>
-                        <div class="helpicon cf_tip" data-i18n_title="osd_rssi_dbm_alarm_HELP"></div>
+                        <div for="rssi_dbm_alarm" class="helpicon cf_tip" data-i18n_title="osd_rssi_dbm_alarm_HELP"></div>
                         <label for="rssi_dbm_alarm">
                             <input id="rssi_dbm_alarm" data-setting="osd_rssi_dbm_alarm" data-setting-multiplier="1" type="number" data-step="1" />
                             <span data-i18n="osd_rssi_dbm_alarm"></span>
                         </label>
-                        <div class="helpicon cf_tip" data-i18n_title="osdalarmSNR_HELP"></div>
+                        <div for="snr_alarm" class="helpicon cf_tip" data-i18n_title="osdalarmSNR_HELP"></div>
                         <label for="snr_alarm">
                             <input id="snr_alarm" data-setting="osd_snr_alarm" data-setting-multiplier="1" type="number" data-step="1" />
                             <span data-i18n="osd_snr_alarm"></span>
diff --git a/tabs/outputs.html b/tabs/outputs.html
index 2ddece03..109e3958 100644
--- a/tabs/outputs.html
+++ b/tabs/outputs.html
@@ -12,35 +12,35 @@
                     <label for="feature-28">
                         <span data-i18n="featurePWM_OUTPUT_ENABLE"></span>
                     </label>
-                    <div class="helpicon cf_tip" data-i18n_title="featurePWM_OUTPUT_ENABLETip"></div>
+                    <div for="feature-28" class="helpicon cf_tip" data-i18n_title="featurePWM_OUTPUT_ENABLETip"></div>
                 </div>
                 <!--list of generated features goes here-->
                 <div id="esc-protocols">
                     <div id="esc-protocol-warning" class="warning-box"></div>
                     <div class="select">
-                        <select name="esc-protocol" id="esc-protocol"></select>
+                        <select name="esc-protocol" id="esc-protocol" data-setting-placeholder="motor_pwm_protocol"></select>
                         <label for="esc-protocol">
                             <span data-i18n="escProtocol"></span>
                         </label>
-                        <div class="helpicon cf_tip" data-i18n_title="escProtocolHelp"></div>
+                        <div for="esc-protocol" class="helpicon cf_tip" data-i18n_title="escProtocolHelp"></div>
                     </div>
                     <div class="select hide-for-shot">
-                        <select name="esc-rate" id="esc-rate"></select>
+                        <select name="esc-rate" id="esc-rate" data-setting-placeholder="motor_pwm_rate"></select>
                         <label for="esc-rate">
                             <span data-i18n="escRefreshRate"></span>
                         </label>
-                        <div class="helpicon cf_tip" data-i18n_title="escRefreshRatelHelp"></div>
+                        <div for="esc-rate" class="helpicon cf_tip" data-i18n_title="escRefreshRatelHelp"></div>
                     </div>
                     <div class="clear-both"></div>
                 </div>
 
                 <div id="servo-rate-container">
                     <div class="select">
-                        <select name="servo-rate" id="servo-rate"></select>
+                        <select name="servo-rate" id="servo-rate" data-setting-placeholder="servo_pwm_rate"></select>
                         <label for="servo-rate">
                             <span data-i18n="servoRefreshRate"></span>
                         </label>
-                        <div class="helpicon cf_tip" data-i18n_title="servoRefreshRatelHelp"></div>
+                        <div for="servo-rate" class="helpicon cf_tip" data-i18n_title="servoRefreshRatelHelp"></div>
                     </div>
                     <div class="clear-both"></div>
                 </div>
diff --git a/tabs/pid_tuning.html b/tabs/pid_tuning.html
index a371d4e4..afcdd03f 100644
--- a/tabs/pid_tuning.html
+++ b/tabs/pid_tuning.html
@@ -300,22 +300,22 @@
                         <tr>
                             <th data-i18n="pidTuning_MaxRollAngle"></th>
                             <td>
-                                <div class="pidTuning_number"><input type="number" class="rate-tpa_input" data-setting="max_angle_inclination_rll" data-unit="decideg-lrg" /></div>
-                                <div class="helpicon cf_tip" data-i18n_title="pidTuning_MaxRollAngleHelp"></div>
+                                <div class="pidTuning_number"><input id="maxRollInclination" type="number" class="rate-tpa_input" data-setting="max_angle_inclination_rll" data-unit="decideg-lrg" /></div>
+                                <div for="maxRollInclination" class="helpicon cf_tip" data-i18n_title="pidTuning_MaxRollAngleHelp"></div>
                             </td>
                         </tr>
                         <tr>
                             <th data-i18n="pidTuning_MaxPitchAngle"></th>
                             <td>
-                                <div class="pidTuning_number"><input type="number" class="rate-tpa_input" data-setting="max_angle_inclination_pit" data-unit="decideg-lrg" /></div>
-                                <div class="helpicon cf_tip" data-i18n_title="pidTuning_MaxPitchAngleHelp"></div>
+                                <div class="pidTuning_number"><input id="maxPitchInclination" type="number" class="rate-tpa_input" data-setting="max_angle_inclination_pit" data-unit="decideg-lrg" /></div>
+                                <div for="maxPitchInclination" class="helpicon cf_tip" data-i18n_title="pidTuning_MaxPitchAngleHelp"></div>
                             </td>
                         </tr>
                         <tr>
                             <th data-i18n="pidTuning_magHoldYawRate"></th>
                             <td>
-                                <div class="pidTuning_number"><input type="number" class="rate-tpa_input" data-setting="heading_hold_rate_limit" data-unit="degps" /></div>
-                                <div class="helpicon cf_tip" data-i18n_title="pidTuning_MagHoldYawRateHelp"></div>
+                                <div class="pidTuning_number"><input id="headingHoldRate" type="number" class="rate-tpa_input" data-setting="heading_hold_rate_limit" data-unit="degps" /></div>
+                                <div for="headingHoldRate" class="helpicon cf_tip" data-i18n_title="pidTuning_MagHoldYawRateHelp"></div>
                             </td>
                         </tr>
                         <tr>
@@ -351,8 +351,8 @@
                             <th data-i18n="pidTuning_gyro_main_lpf_hz"></th>
                             <td>
                                 <div class="pidTuning_number">
-                                    <input data-setting="gyro_main_lpf_hz" type="number" data-presentation="range" class="rate-tpa_input" data-normal-max="250" />
-                                    <div class="helpicon cf_tip" data-i18n_title="pidTuning_gyro_main_lpf_hz_help"></div>
+                                    <input id="gyroLPFHz" data-setting="gyro_main_lpf_hz" type="number" data-presentation="range" class="rate-tpa_input" data-normal-max="250" />
+                                    <div for="gyroLPFHz" class="helpicon cf_tip" data-i18n_title="pidTuning_gyro_main_lpf_hz_help"></div>
                                 </div>
                             </td>
                         </tr>
@@ -360,8 +360,8 @@
                             <th data-i18n="pidTuning_MatrixFilterMinFrequency"></th>
                             <td>
                                 <div class="pidTuning_number">
-                                    <input data-setting="dynamic_gyro_notch_min_hz" data-presentation="range" type="number" class="rate-tpa_input" data-normal-max="150" />
-                                    <div class="helpicon cf_tip" data-i18n_title="pidTuning_MatrixFilterMinFrequencyHelp"></div>
+                                    <input id="gyroNotchMinHz" data-setting="dynamic_gyro_notch_min_hz" data-presentation="range" type="number" class="rate-tpa_input" data-normal-max="150" />
+                                    <div for="gyroNotchMinHz" class="helpicon cf_tip" data-i18n_title="pidTuning_MatrixFilterMinFrequencyHelp"></div>
                                 </div>
                             </td>
                         </tr>
@@ -369,8 +369,8 @@
                             <th data-i18n="pidTuning_MatrixFilterQFactor"></th>
                             <td>
                                 <div class="pidTuning_number">
-                                    <input data-setting="dynamic_gyro_notch_q" data-presentation="range" type="number" class="rate-tpa_input" data-normal-max="300" />
-                                    <div class="helpicon cf_tip" title=""></div>
+                                    <input id="gyroNotchQ" data-setting="dynamic_gyro_notch_q" data-presentation="range" type="number" class="rate-tpa_input" data-normal-max="300" />
+                                    <div for="gyroNotchQ" class="helpicon cf_tip" title=""></div>
                                 </div>
                             </td>
                         </tr>
@@ -395,8 +395,8 @@
                             <th data-i18n="pidTuning_dtermLpfCutoffFrequency"></th>
                             <td>
                                 <div class="pidTuning_number">
-                                    <input data-setting="dterm_lpf_hz" type="number" data-presentation="range" class="rate-tpa_input" data-normal-max="200" />
-                                    <div class="helpicon cf_tip" data-i18n_title="pidTuning_dtermLpfCutoffFrequencyHelp"></div>
+                                    <input id="dTermLPFHz" data-setting="dterm_lpf_hz" type="number" data-presentation="range" class="rate-tpa_input" data-normal-max="200" />
+                                    <div for="dTermLPFHz" class="helpicon cf_tip" data-i18n_title="pidTuning_dtermLpfCutoffFrequencyHelp"></div>
                                 </div>
                             </td>
                         </tr>
@@ -438,8 +438,8 @@
                             <th data-i18n="pidTuning_itermRelaxCutoff"></th>
                             <td>
                                 <div class="pidTuning_number">
-                                    <input type="number" data-setting="mc_iterm_relax_cutoff" class="rate-tpa_input"  data-presentation="range" />
-                                    <div class="helpicon cf_tip" data-i18n_title="pidTuning_itermRelaxCutoffHelp"></div>
+                                    <input id="mcITermRelaxCutoff" type="number" data-setting="mc_iterm_relax_cutoff" class="rate-tpa_input"  data-presentation="range" />
+                                    <div for="mcITermRelaxCutoff" class="helpicon cf_tip" data-i18n_title="pidTuning_itermRelaxCutoffHelp"></div>
                                 </div>
                             </td>
                         </tr>
@@ -465,8 +465,8 @@
                             <th data-i18n="pidTuning_itermBankAngleFreeze"></th>
                             <td>
                                 <div class="pidTuning_number">
-                                    <input type="number" class="rate-tpa_input" data-setting="fw_yaw_iterm_freeze_bank_angle" data-presentation="range" />
-                                    <div class="helpicon cf_tip" data-i18n_title="pidTuning_itermBankAngleFreezeHelp"></div>
+                                    <input id="fwYawItermFreeze" type="number" class="rate-tpa_input" data-setting="fw_yaw_iterm_freeze_bank_angle" data-presentation="range" />
+                                    <div for="fwYawItermFreeze" class="helpicon cf_tip" data-i18n_title="pidTuning_itermBankAngleFreezeHelp"></div>
                                 </div>
                             </td>
                         </tr>
@@ -482,30 +482,30 @@
                         <tr>
                             <th data-i18n="pidTuning_d_boost_min"></th>
                             <td>
-                                <div class="pidTuning_number"><input type="number" class="rate-tpa_input" data-setting="d_boost_min" data-step="0.001" /></div>
-                                <div class="helpicon cf_tip" data-i18n_title="pidTuning_d_boost_min_help"></div>
+                                <div class="pidTuning_number"><input id="dBoostMin" type="number" class="rate-tpa_input" data-setting="d_boost_min" data-step="0.001" /></div>
+                                <div for="dBoostMin" class="helpicon cf_tip" data-i18n_title="pidTuning_d_boost_min_help"></div>
                             </td>
                         </tr>
                         <tr>
                             <th data-i18n="pidTuning_d_boost_max"></th>
                             <td>
-                                <div class="pidTuning_number"><input type="number" class="rate-tpa_input" data-setting="d_boost_max" data-step="0.001" /></div>
-                                <div class="helpicon cf_tip" data-i18n_title="pidTuning_d_boost_max_help"></div>
+                                <div class="pidTuning_number"><input id="dBoostMax" type="number" class="rate-tpa_input" data-setting="d_boost_max" data-step="0.001" /></div>
+                                <div for="dBoostMax" class="helpicon cf_tip" data-i18n_title="pidTuning_d_boost_max_help"></div>
                             </td>
                         </tr>
                         <tr>
                             <th data-i18n="pidTuning_d_boost_max_at_acceleration"></th>
                             <td>
-                                <div class="pidTuning_number"><input type="number" class="rate-tpa_input" data-setting="d_boost_max_at_acceleration" data-step="0.001" /></div>
-                                <div class="helpicon cf_tip" data-i18n_title="pidTuning_d_boost_max_at_acceleration_help"></div>
+                                <div class="pidTuning_number"><input id="dBoostMaxAccel" type="number" class="rate-tpa_input" data-setting="d_boost_max_at_acceleration" data-step="0.001" /></div>
+                                <div for="dBoostMaxAccel" class="helpicon cf_tip" data-i18n_title="pidTuning_d_boost_max_at_acceleration_help"></div>
                             </td>
                         </tr>
                         <tr>
                             <th data-i18n="pidTuning_d_boost_gyro_delta_lpf_hz"></th>
                             <td>
                                 <div class="pidTuning_number">
-                                    <input type="number" class="rate-tpa_input" data-setting="d_boost_gyro_delta_lpf_hz" data-presentation="range" data-normal-max="160" />
-                                    <div class="helpicon cf_tip" data-i18n_title="pidTuning_d_boost_gyro_delta_lpf_hz_help"></div>
+                                    <input id="dBoostGyroDelta" type="number" class="rate-tpa_input" data-setting="d_boost_gyro_delta_lpf_hz" data-presentation="range" data-normal-max="160" />
+                                    <div for="dBoostGyroDelta" class="helpicon cf_tip" data-i18n_title="pidTuning_d_boost_gyro_delta_lpf_hz_help"></div>
                                 </div>
                             </td>
                         </tr>
@@ -521,8 +521,8 @@
                         <th data-i18n="pidTuning_TPA"></th>
                         <td>
                             <div class="pidTuning_number">
-                                <input type="number" class="rate-tpa_input" data-setting="tpa_rate" data-unit="percent"  data-presentation="range" />
-                                <div class="helpicon cf_tip" data-i18n_title="pidTuningTPAHelp"></div>
+                                <input id="tpaRate" type="number" class="rate-tpa_input" data-setting="tpa_rate" data-unit="percent"  data-presentation="range" />
+                                <div for="tpaRate" class="helpicon cf_tip" data-i18n_title="pidTuningTPAHelp"></div>
                             </div>
                         </td>
                     </tr>
@@ -530,16 +530,16 @@
                         <th data-i18n="pidTuning_TPABreakPoint"></th>
                         <td>
                             <div class="pidTuning_number">
-                                <input type="number" class="rate-tpa_input" data-setting="tpa_breakpoint" data-presentation="range" data-step="5" />
-                                <div class="helpicon cf_tip" data-i18n_title="pidTuningTPABreakPointHelp"></div>
+                                <input id="tpaBreakpoint" type="number" class="rate-tpa_input" data-setting="tpa_breakpoint" data-presentation="range" data-step="5" />
+                                <div for="tpaBreakpoint" class="helpicon cf_tip" data-i18n_title="pidTuningTPABreakPointHelp"></div>
                             </div>
                         </td>
                     </tr>
                     <tr>
                         <th data-i18n="pidTuning_FW_TPATimeConstant"></th>
                         <td>
-                            <div class="pidTuning_number"><input type="number" class="rate-tpa_input" data-setting="fw_tpa_time_constant" data-unit="ms" /></div>
-                            <div class="helpicon cf_tip" data-i18n_title="pidTuning_FW_TPATimeConstantHelp"></div>
+                            <div class="pidTuning_number"><input id="tpaTimeConstant" type="number" class="rate-tpa_input" data-setting="fw_tpa_time_constant" data-unit="ms" /></div>
+                            <div for="tpaTimeConstant" class="helpicon cf_tip" data-i18n_title="pidTuning_FW_TPATimeConstantHelp"></div>
                         </td>
                     </tr>
                 </table>
@@ -552,8 +552,8 @@
                         <tr>
                             <th data-i18n="pidTuning_fw_level_pitch_trim"></th>
                             <td>
-                                <div class="pidTuning_number"><input class="rate-tpa_input" data-setting="fw_level_pitch_trim" data-unit="deg" /></div>
-                                <div class="helpicon cf_tip" data-i18n_title="pidTuning_fw_level_pitch_trim_help"></div>
+                                <div class="pidTuning_number"><input id="fwLevelTrim" class="rate-tpa_input" data-setting="fw_level_pitch_trim" data-unit="deg" /></div>
+                                <div for="fwLevelTrim" class="helpicon cf_tip" data-i18n_title="pidTuning_fw_level_pitch_trim_help"></div>
                             </td>
                         </tr>
                     </tbody>

From f85bf5d0e516b272be404d9ff983ced6397ee3d4 Mon Sep 17 00:00:00 2001
From: Darren Lines <darren@darrenlines.uk>
Date: Thu, 19 May 2022 12:17:26 +0100
Subject: [PATCH 2/2] Removed test code

---
 js/settings.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/js/settings.js b/js/settings.js
index 6502ba3c..326f4c74 100644
--- a/js/settings.js
+++ b/js/settings.js
@@ -509,7 +509,6 @@ var Settings = (function () {
         return function() {
             self.configureInputs().then(callback);
             self.linkHelpIcons();
-            //self.configureInputs().then(self.linkHelpIcons().then(callback));
         };
     };