From bcdb277a48ca85caaf6b8af8fc00a3ba7030950a Mon Sep 17 00:00:00 2001
From: jneilliii <jneilliii+github@gmail.com>
Date: Sat, 10 Apr 2021 00:31:44 -0400
Subject: [PATCH] add missing tooltip pop-ups in tasmota editor modal

---
 .../templates/tasmota_settings.jinja2         | 68 +++++++++----------
 1 file changed, 34 insertions(+), 34 deletions(-)

diff --git a/octoprint_tasmota/templates/tasmota_settings.jinja2 b/octoprint_tasmota/templates/tasmota_settings.jinja2
index f3db9e6..db0fb1d 100644
--- a/octoprint_tasmota/templates/tasmota_settings.jinja2
+++ b/octoprint_tasmota/templates/tasmota_settings.jinja2
@@ -201,64 +201,64 @@
 	<div class="modal-body">
 		<table class="table table-condensed">
 			<tr>
-				<td><div class="control-group" data-bind="css: {error: ip().length == 0}"><div class="controls"><label class="control-label">{{ _('IP') }}</label><input type="text" class="input-block-level" data-bind="value: ip, valueUpdate: 'keyup'" /></div></div></td>
-				<td><div class="controls"><label class="control-label">{{ _('Index') }}</label><input type="number" min="1" class="input-block-level" data-bind="value: idx" /></div></td>
-				<td><div class="controls"><label class="control-label">{{ _('Label') }}</label><input type="text" class="input input-small" data-bind="value: label" /></div></td>
-				<td><div class="controls"><label class="control-label">{{ _('Username') }}</label><input type="text" class="input-block-level" data-bind="value: username" /></div></td>
-				<td><div class="controls"><label class="control-label">{{ _('Password') }}</label><input type="text" class="input input-small" data-bind="value: password" /></div></td>
+				<td><div class="control-group" data-bind="css: {error: ip().length == 0}"><div class="controls" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('IP adress of your tasmota device.') }}"><label class="control-label">{{ _('IP') }}</label><input type="text" class="input-block-level" data-bind="value: ip, valueUpdate: 'keyup'" /></div></div></td>
+				<td><div class="controls" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('Index of the relay, specifically used for multiple plug relay devices.') }}"><label class="control-label">{{ _('Index') }}</label><input type="number" min="1" class="input-block-level" data-bind="value: idx" /></div></td>
+				<td><div class="controls" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('Name to display on hover of the navbar button.') }}"><label class="control-label">{{ _('Label') }}</label><input type="text" class="input input-small" data-bind="value: label" /></div></td>
+				<td><div class="controls" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('Username to connect to Tasmota web interface if required.') }}"><label class="control-label">{{ _('Username') }}</label><input type="text" class="input-block-level" data-bind="value: username" /></div></td>
+				<td><div class="controls" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('Password to connect to Tasmota web interface if required.') }}"><label class="control-label">{{ _('Password') }}</label><input type="text" class="input input-small" data-bind="value: password" /></div></td>
 				<td style="text-align: center;vertical-align: middle;"><button class="btn" data-bind="click: $root.checkSetOption26, enable: ip().length > 0">Verify</button></td>
 			</tr>
 			<tr>
-				<td><div class="controls"><label class="control-label">{{ _('On Color') }}</label><input type="color" class="input input-small" data-bind="value: on_color" /></div></td>
-				<td><div class="controls"><label class="control-label">{{ _('Off Color') }}</label><input type="color" class="input input-small" data-bind="value: off_color" /></div></td>
-				<td><div class="controls"><label class="control-label">{{ _('Unknown Color') }}</label><input type="color" class="input input-small" data-bind="value: unknown_color" /></div></td>
-				<td><div class="controls"><label class="control-label">{{ _('Icon Class') }}</label><input type="text" class="input-block-level" data-bind="value: icon, iconpicker: icon,iconpickerOptions: {hideOnSelect: true, collision: true}" /></div></td>
-				<td><div class="controls"><label class="control-label"><input type="checkbox" data-bind="checked: is_led" title="Is an LED or WS2812 type device connected." /> {{ _('LED') }}</label><div class="input-append" data-bind="visible: is_led"><input type="number" min="1" max="100" class="input-small" data-bind="value: brightness" /><span class="add-on">%</span></div></div></td>
-				<td><div class="controls"><label class="control-label">{{ _('Sensor Identifier') }}</label><input type="text" class="input-block-level" data-bind="value: sensor_identifier" /></div></td>
+				<td><div class="controls" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('Color to display when device is on.') }}"><label class="control-label">{{ _('On Color') }}</label><input type="color" class="input input-small" data-bind="value: on_color" /></div></td>
+				<td><div class="controls" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('Color to display when device is off.') }}"><label class="control-label">{{ _('Off Color') }}</label><input type="color" class="input input-small" data-bind="value: off_color" /></div></td>
+				<td><div class="controls" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('Color to display when device status is unknown.') }}"><label class="control-label">{{ _('Unknown Color') }}</label><input type="color" class="input input-small" data-bind="value: unknown_color" /></div></td>
+				<td><div class="controls" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('Fontawesom icon class name for navbar button.') }}"><label class="control-label">{{ _('Icon Class') }}</label><input type="text" class="input-block-level" data-bind="value: icon, iconpicker: icon,iconpickerOptions: {hideOnSelect: true, collision: true}" /></div></td>
+				<td><div class="controls" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('Is an LED or WS2812 type device connected, enter brightness value as percentage.') }}"><label class="control-label"><input type="checkbox" data-bind="checked: is_led" /> {{ _('LED') }}</label><div class="input-append" data-bind="visible: is_led"><input type="number" min="1" max="100" class="input-small" data-bind="value: brightness" /><span class="add-on">%</span></div></div></td>
+				<td><div class="controls" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('Sensor identifier for connected sensors, ie DHT11 or BME280') }}"><label class="control-label">{{ _('Sensor Identifier') }}</label><input type="text" class="input-block-level" data-bind="value: sensor_identifier" /></div></td>
 			</tr>
 			<tr>
-				<td><div class="controls"><label class="checkbox"><input type="checkbox" data-bind="checked: event_on_upload, enable: $root.settings.settings.plugins.tasmota.event_on_upload_monitoring()" title="Automatically power on when file is uploaded." /> On with Upload</label></div></td>
-				<td><div class="controls"><label class="checkbox"><input type="checkbox" data-bind="checked: event_on_connecting, enable: $root.settings.settings.plugins.tasmota.event_on_connecting_monitoring()" title="Automatically power on when pressing Connect button" /> On with Connect</label></div></td>
-				<td><div class="controls"><label class="checkbox"><input type="checkbox" data-bind="checked: automaticShutdownEnabled, enable: $root.settings.settings.plugins.tasmota.powerOffWhenIdle()" title="Automatically power off when printer is idle." /> Off on Idle</label></div></td>
-				<td><div class="controls"><label class="checkbox"><input type="checkbox" data-bind="checked: thermal_runaway" title="Power off if temperature exceeds configured max temperatures." /> Thermal Runaway</label></div></td>
+				<td><div class="controls" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('Automatically power on when file is uploaded.') }}"><label class="checkbox"><input type="checkbox" data-bind="checked: event_on_upload, enable: $root.settings.settings.plugins.tasmota.event_on_upload_monitoring()" /> On with Upload</label></div></td>
+				<td><div class="controls" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('Automatically power on when pressing Connect button.') }}"><label class="checkbox"><input type="checkbox" data-bind="checked: event_on_connecting, enable: $root.settings.settings.plugins.tasmota.event_on_connecting_monitoring()" /> On with Connect</label></div></td>
+				<td><div class="controls" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('Automatically power off when printer is idle.') }}"><label class="checkbox"><input type="checkbox" data-bind="checked: automaticShutdownEnabled, enable: $root.settings.settings.plugins.tasmota.powerOffWhenIdle()" /> Off on Idle</label></div></td>
+				<td><div class="controls" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('Power off if temperature exceeds configured max temperatures.') }}"><label class="checkbox"><input type="checkbox" data-bind="checked: thermal_runaway" /> Thermal Runaway</label></div></td>
 				<td><div class="controls" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('Automatically power off this relay when Error Event Monitoring is enabled.') }}"><label class="checkbox"><input type="checkbox" data-bind="checked: event_on_error, enable: $root.settings.settings.plugins.tasmota.event_on_error_monitoring()" disabled /> {{ _('Off on Error') }}</label></div></td>
-				<td><div class="controls"><label class="checkbox"><input type="checkbox" title="{{ _('Automatically power off this relay when Disconnect Event Monitoring is enabled.') }}" data-toggle="tooltip" data-bind="checked: event_on_disconnect, enable: $root.settings.settings.plugins.tasmota.event_on_disconnect_monitoring(), tooltip: {container: '#TasmotaEditor'}" disabled /> {{ _('Off on Disconnect') }}</label></div></td>
+				<td><div class="controls"data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('Automatically power off this relay when Disconnect Event Monitoring is enabled.') }}"><label class="checkbox"><input type="checkbox" data-bind="checked: event_on_disconnect, enable: $root.settings.settings.plugins.tasmota.event_on_disconnect_monitoring()" disabled /> {{ _('Off on Disconnect') }}</label></div></td>
 			</tr>
 			<tr>
 				<td>
-					<div class="row-fluid controls input-append">
-						<label class="checkbox"><input type="checkbox" data-bind="checked: autoConnect" title="Automatically connect to your printer after configured delay from power on." /> Auto Connect</label>
+					<div class="row-fluid controls input-append" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('Automatically connect to your printer after configured delay from power on.') }}">
+						<label class="checkbox"><input type="checkbox" data-bind="checked: autoConnect" /> Auto Connect</label>
 						<input type="text" data-bind="value: autoConnectDelay,visible: autoConnect" class="input input-mini" />
 						<span class="add-on" data-bind="visible: autoConnect">secs</span>
 					</div>
 				</td>
 				<td>
-					<div class="row-fluid controls input-append">
-						<label class="checkbox"><input type="checkbox" data-bind="checked: autoDisconnect" title="Automatically disconnect from printer and then power off relay after configured delay." /> Auto Disconnect</label>
+					<div class="row-fluid controls input-append" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('Automatically disconnect from printer and then power off relay after configured delay.') }}">
+						<label class="checkbox"><input type="checkbox" data-bind="checked: autoDisconnect" /> Auto Disconnect</label>
 						<input type="text" data-bind="value: autoDisconnectDelay,visible: autoDisconnect" class="input input-mini" />
 						<span class="add-on" data-bind="visible: autoDisconnect">secs</span>
 					</div>
 				</td>
 				<td></td>
-				<td><div class="controls"><label class="checkbox"><input type="checkbox" data-bind="checked: displayWarning" title="Prompt for confirmation before powering off via the navbar button." /> Warning Prompt</label></div></td>
-				<td><div class="controls"><label class="checkbox"><input type="checkbox" data-bind="checked: warnPrinting" title="Prompt for confimration before powering off when a print is active." /> Warn While Printing</label></div></td>
+				<td><div class="controls" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('Prompt for confirmation before powering off via the navbar button.') }}"><label class="checkbox"><input type="checkbox" data-bind="checked: displayWarning" /> Warning Prompt</label></div></td>
+				<td><div class="controls" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('Prompt for confimration before powering off when a print is active.') }}"><label class="checkbox"><input type="checkbox" data-bind="checked: warnPrinting" /> Warn While Printing</label></div></td>
 				<td></td>
 			</tr>
 			<tr>
 				<td colspan="3">
-					<div class="row-fluid controls">
+					<div class="row-fluid controls" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('Use tasmota\'s built in countdown functionality to offload the power operations. Helpful for safe shutdown of pi.') }}">
 						<label class="checkbox"><input type="checkbox" data-bind="checked: use_backlog"/> Use Countdown Timers</label>
 					</div>
 					<div class="row-fluid" data-bind="visible: use_backlog">
 						<div class="span6">
-							<div class="controls input-append">
+							<div class="controls input-append" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('Amount of delay in seconds for powering on device.') }}">
 								<label class="control-label">{{ _('On Delay Countdown') }}</label>
 								<input type="number" min="0" data-bind="value: backlog_on_delay" class="input input-mini" />
 								<span class="add-on">secs</span>
 							</div>
 						</div>
 						<div class="span6">
-							<div class="controls input-append">
+							<div class="controls input-append" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('Amount of delay in seconds for powering off device.') }}">
 								<label class="control-label">{{ _('Off Delay Countdown') }}</label>
 								<input type="number" min="0" data-bind="value: backlog_off_delay" class="input input-small" />
 								<span class="add-on">secs</span>
@@ -267,19 +267,19 @@
 					</div>
 				</td>
 				<td colspan="3">
-					<div class="row-fluid controls">
+					<div class="row-fluid controls" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('When checked this will enable the processing of M80 and M81 commands from gcode to power on/off device.') }}">
 						<label class="checkbox"><input type="checkbox" data-bind="checked: gcodeEnabled"/>GCODE On <span class="label" title="Click to copy this gcode command to power on relay to the clipboard." data-bind="text: $root.gcodeOnString($data),visible: gcodeEnabled,click: function(data, evt) {copyToClipboard($(evt.currentTarget).text())}"></span> / Off <span class="label" title="Click to copy this gcode command to power off relay." data-bind="text: $root.gcodeOffString($data),visible: gcodeEnabled,click: function(data, evt) {copyToClipboard($(evt.currentTarget).text())}"></span> Trigger</label>
 					</div>
 					<div class="row-fluid" data-bind="visible: gcodeEnabled">
 						<div class="span6">
-							<div class="controls input-append">
+							<div class="controls input-append" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('Amount of delay in seconds before powering on device.') }}">
 								<label class="control-label">{{ _('GCODE On Delay') }}</label>
 								<input type="number" data-bind="value: gcodeOnDelay" class="input input-mini" />
 								<span class="add-on">secs</span>
 							</div>
 						</div>
 						<div class="span6">
-							<div class="controls input-append">
+							<div class="controls input-append" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('Amount of delay in seconds for powering off device.') }}">
 								<label class="control-label">{{ _('GCODE Off Delay') }}</label>
 								<input type="number" data-bind="value: gcodeOffDelay" class="input input-mini" />
 								<span class="add-on">secs</span>
@@ -290,18 +290,18 @@
 			</tr>
 			<tr>
 				<td colspan="3">
-					<div class="row-fluid controls">
+					<div class="row-fluid controls" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('When checked will run the system command configured in setting below after sending on command to device.') }}">
 						<label class="checkbox"><input type="checkbox" data-bind="checked: sysCmdOn"/> Run System Command After On</label>
 					</div>
 					<div class="row-fluid controls" data-bind="visible: sysCmdOn">
 						<div class="span8">
-							<div class="controls">
+							<div class="controls" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('System command to run after the on command is sent to device.') }}">
 								<label class="control-label">{{ _('System Command to Run') }}</label>
 								<input type="text" data-bind="value: sysRunCmdOn,visible: sysCmdOn" class="input-block-level" />
 							</div>
 						</div>
 						<div class="span4">
-							<div class="controls input-append">
+							<div class="controls input-append" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('Delay in seconds before system command is run.') }}">
 								<label class="control-label">{{ _('Delay') }}</label>
 								<input type="number" data-bind="value: sysCmdOnDelay"  class="input input-mini" />
 								<span class="add-on">secs</span>
@@ -310,18 +310,18 @@
 					</div>
 				</td>
 				<td colspan="3">
-					<div class="row-fluid controls">
+					<div class="row-fluid controls" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('When checked will run the system command configured in setting below before sending off command to device.') }}">
 						<label class="checkbox"><input type="checkbox" data-bind="checked: sysCmdOff"/> Run System Command Before Off</label>
 					</div>
 					<div class="row-fluid controls" data-bind="visible: sysCmdOff">
 						<div class="span8">
-							<div class="controls">
+							<div class="controls" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('System command to run before the on command is sent to device.') }}">
 								<label class="control-label">{{ _('System Command to Run') }}</label>
 								<input type="text" data-bind="value: sysRunCmdOff,visible: sysCmdOff" class="input-block-level" />
 							</div>
 						</div>
 						<div class="span4">
-							<div class="controls input-append">
+							<div class="controls input-append" data-toggle="tooltip" data-bind="tooltip: {container: '#TasmotaEditor'}" title="{{ _('Delay in seconds after system command is run before powering off device.') }}">
 								<label class="control-label">{{ _('Delay') }}</label>
 								<input type="number" data-bind="value: sysCmdOffDelay"  class="input input-mini" />
 								<span class="add-on">secs</span>