From 33ea1e56cfa15c47c1545dfa12bccedde46f1aa1 Mon Sep 17 00:00:00 2001
From: Bernd Bestel <bernd@berrnd.de>
Date: Sun, 27 Jun 2021 19:34:28 +0200
Subject: [PATCH] Trigger help-tooltips also by click (instead of only hover,
 which is Bootstraps default) (fixes #1468)

---
 changelog/62_UNRELEASED_xxxx-xx-xx.md      |  1 +
 public/js/extensions.js                    | 10 ----------
 public/js/grocy.js                         |  8 --------
 views/choreform.blade.php                  |  4 ++++
 views/components/datetimepicker.blade.php  |  1 +
 views/components/datetimepicker2.blade.php |  1 +
 views/components/locationpicker.blade.php  |  1 +
 views/components/numberpicker.blade.php    |  1 +
 views/components/productpicker.blade.php   |  2 ++
 views/components/recipepicker.blade.php    |  1 +
 views/consume.blade.php                    |  1 +
 views/inventory.blade.php                  |  1 +
 views/locationcontentsheet.blade.php       |  1 +
 views/locationform.blade.php               |  1 +
 views/login.blade.php                      |  1 +
 views/productform.blade.php                | 11 +++++++++++
 views/products.blade.php                   |  2 ++
 views/recipeform.blade.php                 |  1 +
 views/recipeposform.blade.php              |  3 +++
 views/recipes.blade.php                    |  2 ++
 views/transfer.blade.php                   |  1 +
 views/userfieldform.blade.php              |  2 ++
 22 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/changelog/62_UNRELEASED_xxxx-xx-xx.md b/changelog/62_UNRELEASED_xxxx-xx-xx.md
index 54f596cf..c57598bc 100644
--- a/changelog/62_UNRELEASED_xxxx-xx-xx.md
+++ b/changelog/62_UNRELEASED_xxxx-xx-xx.md
@@ -56,6 +56,7 @@
   - Filtering of accounts is now possible
   - => See the new `config.php` options
 - Some night mode style improvements (thanks @BlizzWave and @KTibow)
+- Help tooltips are now additionally also triggered by clicking on them (instead of only hovering them, which doesn't work on mobile / touch devices)
 - Fixed that the number picker up/down buttons did not work when the input field was empty or contained an invalid number
 
 ### API fixes
diff --git a/public/js/extensions.js b/public/js/extensions.js
index 0900a786..8b16e2b6 100644
--- a/public/js/extensions.js
+++ b/public/js/extensions.js
@@ -51,16 +51,6 @@ RemoveUriParam = function(key)
 	window.history.replaceState({}, "", decodeURIComponent(`${location.pathname}?${queryParameters}`));
 };
 
-IsTouchInputDevice = function()
-{
-	if (("ontouchstart" in window) || window.DocumentTouch && document instanceof DocumentTouch)
-	{
-		return true;
-	}
-
-	return false;
-}
-
 BoolVal = function(test)
 {
 	if (!test)
diff --git a/public/js/grocy.js b/public/js/grocy.js
index 034ac2ec..d5180f07 100644
--- a/public/js/grocy.js
+++ b/public/js/grocy.js
@@ -368,14 +368,6 @@ window.FontAwesomeConfig = {
 	searchPseudoElements: true
 }
 
-// Don't show tooltips on touch input devices
-if (IsTouchInputDevice())
-{
-	var css = document.createElement("style");
-	css.innerHTML = ".tooltip { display: none; }";
-	document.body.appendChild(css);
-}
-
 Grocy.FrontendHelpers = {};
 Grocy.FrontendHelpers.ValidateForm = function(formId)
 {
diff --git a/views/choreform.blade.php b/views/choreform.blade.php
index 02a23722..bb1677e8 100644
--- a/views/choreform.blade.php
+++ b/views/choreform.blade.php
@@ -68,6 +68,7 @@
 				<label for="period_type">{{ $__t('Period type') }}&nbsp;<i id="chore-period-type-info"
 						class="fas fa-question-circle text-muted"
 						data-toggle="tooltip"
+						data-trigger="hover click"
 						title=""></i></label>
 				<select required
 					class="custom-control custom-select input-group-chore-period-type"
@@ -172,6 +173,7 @@
 				<label for="assignment_type">{{ $__t('Assignment type') }} <i id="chore-assignment-type-info"
 						class="fas fa-question-circle text-muted"
 						data-toggle="tooltip"
+						data-trigger="hover click"
 						title=""></i></label>
 				<select required
 					class="custom-control custom-select input-group-chore-assignment-type"
@@ -223,6 +225,7 @@
 						for="track_date_only">{{ $__t('Track date only') }}
 						&nbsp;<i class="fas fa-question-circle text-muted"
 							data-toggle="tooltip"
+							data-trigger="hover click"
 							title="{{ $__t('When enabled only the day of an execution is tracked, not the time') }}"></i>
 					</label>
 				</div>
@@ -237,6 +240,7 @@
 						for="rollover">{{ $__t('Due date rollover') }}
 						&nbsp;<i class="fas fa-question-circle text-muted"
 							data-toggle="tooltip"
+							data-trigger="hover click"
 							title="{{ $__t('When enabled the chore can never be overdue, the due date will shift forward each day when due') }}"></i>
 					</label>
 				</div>
diff --git a/views/components/datetimepicker.blade.php b/views/components/datetimepicker.blade.php
index ff37a2e5..9e5ac05f 100644
--- a/views/components/datetimepicker.blade.php
+++ b/views/components/datetimepicker.blade.php
@@ -22,6 +22,7 @@
 		@if(!empty($hint))
 		&nbsp;<i class="fas fa-question-circle text-muted"
 			data-toggle="tooltip"
+			data-trigger="hover click"
 			title="{{ $hint }}"></i>
 		@endif
 		<span class="small text-muted">
diff --git a/views/components/datetimepicker2.blade.php b/views/components/datetimepicker2.blade.php
index 171d7eed..e44977f1 100644
--- a/views/components/datetimepicker2.blade.php
+++ b/views/components/datetimepicker2.blade.php
@@ -21,6 +21,7 @@
 		@if(!empty($hint))
 		&nbsp;<i class="fas fa-question-circle text-muted"
 			data-toggle="tooltip"
+			data-trigger="hover click"
 			title="{{ $hint }}"></i>
 		@endif
 		<span class="small text-muted">
diff --git a/views/components/locationpicker.blade.php b/views/components/locationpicker.blade.php
index 4c18c152..71cf70b9 100644
--- a/views/components/locationpicker.blade.php
+++ b/views/components/locationpicker.blade.php
@@ -16,6 +16,7 @@
 		@if(!empty($hint))
 		<i class="fas fa-question-circle text-muted"
 			data-toggle="tooltip"
+			data-trigger="hover click"
 			title="{{ $hint }}"></i>
 		@endif
 	</label>
diff --git a/views/components/numberpicker.blade.php b/views/components/numberpicker.blade.php
index 4e3df4a8..4eceda4f 100644
--- a/views/components/numberpicker.blade.php
+++ b/views/components/numberpicker.blade.php
@@ -27,6 +27,7 @@
 		<i id="{{ $hintId }}"
 			class="fas fa-question-circle text-muted"
 			data-toggle="tooltip"
+			data-trigger="hover click"
 			title="{{ $hint }}"></i>
 		@endif
 		{!! $additionalHtmlContextHelp !!}
diff --git a/views/components/productpicker.blade.php b/views/components/productpicker.blade.php
index 59d33df2..0a93c550 100644
--- a/views/components/productpicker.blade.php
+++ b/views/components/productpicker.blade.php
@@ -25,11 +25,13 @@
 		@if(!$disallowAllProductWorkflows)
 		<i class="fas fa-question-circle text-muted"
 			data-toggle="tooltip"
+			data-trigger="hover click"
 			title="{{ $__t('Type a new product name or barcode and hit TAB or ENTER to start a workflow') }}"></i>
 		@endif
 		@if(!empty($hint))
 		<i class="fas fa-question-circle text-muted"
 			data-toggle="tooltip"
+			data-trigger="hover click"
 			title="{{ $hint }}"></i>
 		@endif
 		<span id="barcode-lookup-disabled-hint"
diff --git a/views/components/recipepicker.blade.php b/views/components/recipepicker.blade.php
index 91dc34da..dccf71fa 100644
--- a/views/components/recipepicker.blade.php
+++ b/views/components/recipepicker.blade.php
@@ -16,6 +16,7 @@
 		@if(!empty($hint))
 		<i class="fas fa-question-circle text-muted"
 			data-toggle="tooltip"
+			data-trigger="hover click"
 			title="{{ $hint }}"></i>
 		@endif
 	</label>
diff --git a/views/consume.blade.php b/views/consume.blade.php
index 47ad29f3..93fbad1f 100644
--- a/views/consume.blade.php
+++ b/views/consume.blade.php
@@ -117,6 +117,7 @@
 						for="use_specific_stock_entry">{{ $__t('Use a specific stock item') }}
 						&nbsp;<i class="fas fa-question-circle text-muted"
 							data-toggle="tooltip"
+							data-trigger="hover click"
 							title="{{ $__t('The first item in this list would be picked by the default rule which is "Opened first, then first due first, then first in first out"') }}"></i>
 					</label>
 				</div>
diff --git a/views/inventory.blade.php b/views/inventory.blade.php
index 0f639a4d..82d1ba38 100644
--- a/views/inventory.blade.php
+++ b/views/inventory.blade.php
@@ -88,6 +88,7 @@
 			'hint' => $__t('Per stock quantity unit', GROCY_CURRENCY),
 			'additionalHtmlContextHelp' => '<i class="fas fa-question-circle text-muted"
 				data-toggle="tooltip"
+				data-trigger="hover click"
 				title="' . $__t('This will apply to added products') . '"></i>',
 			'isRequired' => false,
 			'additionalCssClasses' => 'locale-number-input locale-number-currency'
diff --git a/views/locationcontentsheet.blade.php b/views/locationcontentsheet.blade.php
index 4c2c874b..5f27ca1e 100644
--- a/views/locationcontentsheet.blade.php
+++ b/views/locationcontentsheet.blade.php
@@ -33,6 +33,7 @@
 		@yield('title')
 		<i class="fas fa-question-circle text-muted small"
 			data-toggle="tooltip"
+			data-trigger="hover click"
 			title="{{ $__t('Here you can print a page per location with the current stock, maybe to hang it there and note the consumed things on it') }}"></i>
 	</h2>
 	<div class="float-right">
diff --git a/views/locationform.blade.php b/views/locationform.blade.php
index 026a8eb9..7e00dcb2 100644
--- a/views/locationform.blade.php
+++ b/views/locationform.blade.php
@@ -61,6 +61,7 @@
 						for="is_freezer">{{ $__t('Is freezer') }}
 						&nbsp;<i class="fas fa-question-circle text-muted"
 							data-toggle="tooltip"
+							data-trigger="hover click"
 							title="{{ $__t('When moving products from/to a freezer location, the products due date is automatically adjusted according to the product settings') }}"></i>
 					</label>
 				</div>
diff --git a/views/login.blade.php b/views/login.blade.php
index a42af798..08fb7afb 100644
--- a/views/login.blade.php
+++ b/views/login.blade.php
@@ -45,6 +45,7 @@
 						{{ $__t('Stay logged in permanently') }}
 						<i class="fas fa-question-circle text-muted"
 							data-toggle="tooltip"
+							data-trigger="hover click"
 							title="{{ $__t('When not set, you will get logged out at latest after 30 days') }}"></i>
 					</label>
 				</div>
diff --git a/views/productform.blade.php b/views/productform.blade.php
index 23bbf6bd..f7b23e1e 100644
--- a/views/productform.blade.php
+++ b/views/productform.blade.php
@@ -145,6 +145,7 @@
 						for="cumulate_min_stock_amount_of_sub_products">{{ $__t('Accumulate sub products min. stock amount') }}
 						&nbsp;<i class="fas fa-question-circle text-muted"
 							data-toggle="tooltip"
+							data-trigger="hover click"
 							title="{{ $__t('If enabled, the min. stock amount of sub products will be accumulated into this product, means the sub product will never be "missing", only this product') }}"></i>
 					</label>
 				</div>
@@ -156,6 +157,7 @@
 					for="location_id">{{ $__t('Due date type') }}
 					<i class="fas fa-question-circle text-muted"
 						data-toggle="tooltip"
+						data-trigger="hover click"
 						title="{{ $__t('Based on the selected type, the highlighting on the stock overview page will be different') }}"></i>
 				</label>
 				<div class="custom-control custom-radio mt-n2">
@@ -171,6 +173,7 @@
 						for="due-type-bestbefore">{{ $__t('Best before date') }}
 						<i class="fas fa-question-circle text-muted"
 							data-toggle="tooltip"
+							data-trigger="hover click"
 							title="{{ $__t('Means that the product is maybe still safe to be consumed after its due date is reached') }}"></i>
 					</label>
 				</div>
@@ -187,6 +190,7 @@
 						for="due-type-expiration">{{ $__t('Expiration date') }}
 						<i class="fas fa-question-circle text-muted"
 							data-toggle="tooltip"
+							data-trigger="hover click"
 							title="{{ $__t('Means that the product is not safe to be consumed after its due date is reached') }}"></i>
 					</label>
 				</div>
@@ -245,6 +249,7 @@
 				<label for="qu_id_stock">{{ $__t('Quantity unit stock') }}</label>
 				<i class="fas fa-question-circle text-muted"
 					data-toggle="tooltip"
+					data-trigger="hover click"
 					title="{{ $__t('Quantity unit stock cannot be changed after first purchase') }}"></i>
 				<select required
 					class="custom-control custom-select input-group-qu"
@@ -268,6 +273,7 @@
 				<label for="qu_id_purchase">{{ $__t('Default quantity unit purchase') }}</label>
 				<i class="fas fa-question-circle text-muted"
 					data-toggle="tooltip"
+					data-trigger="hover click"
 					title="{{ $__t('This is the default quantity unit used when adding this product to the shopping list') }}"></i>
 				<select required
 					class="custom-control custom-select input-group-qu"
@@ -304,6 +310,7 @@
 						for="enable_tare_weight_handling">{{ $__t('Enable tare weight handling') }}
 						&nbsp;<i class="fas fa-question-circle text-muted"
 							data-toggle="tooltip"
+							data-trigger="hover click"
 							title="{{ $__t('This is useful e.g. for flour in jars - on purchase/consume/inventory you always weigh the whole jar, the amount to be posted is then automatically calculated based on what is in stock and the tare weight defined below') }}"></i>
 					</label>
 				</div>
@@ -333,6 +340,7 @@
 						for="not_check_stock_fulfillment_for_recipes">{{ $__t('Disable stock fulfillment checking for this ingredient') }}
 						&nbsp;<i class="fas fa-question-circle text-muted"
 							data-toggle="tooltip"
+							data-trigger="hover click"
 							title="{{ $__t('This will be used as the default setting when adding this product as a recipe ingredient') }}"></i>
 					</label>
 				</div>
@@ -409,6 +417,7 @@
 					<label class="form-check-label custom-control-label"
 						for="allow_label_per_unit">{{ $__t('Allow label printing per unit') }}&nbsp;<i class="fas fa-question-circle text-muted"
 							data-toggle="tooltip"
+							data-trigger="hover click"
 							title="{{ $__t('Allow printing of one label per unit on purchase (after conversion) - e.g. 1 purchased pack adding 10 pieces of stock would print 10 labels') }}"></i>
 					</label>
 				</div>
@@ -459,6 +468,7 @@
 					<label class="form-check-label custom-control-label"
 						for="hide_on_stock_overview">{{ $__t('Never show on stock overview') }}&nbsp;<i class="fas fa-question-circle text-muted"
 							data-toggle="tooltip"
+							data-trigger="hover click"
 							title="{{ $__t('The stock overview page lists all products which are currently in-stock or below their min. stock amount - enable this to hide this product there always') }}"></i>
 					</label>
 				</div>
@@ -592,6 +602,7 @@
 						{{ $__t('grocycode') }}
 						<i class="fas fa-question-circle text-muted"
 							data-toggle="tooltip"
+							data-trigger="hover click"
 							title="{{ $__t('grocycode is a unique referer to this product in your grocy instance - print it onto a label and scan it like any other barcode') }}"></i>
 					</h4>
 					<p>
diff --git a/views/products.blade.php b/views/products.blade.php
index c2f5e01e..310157a1 100644
--- a/views/products.blade.php
+++ b/views/products.blade.php
@@ -220,6 +220,7 @@
 				<div class="form-group">
 					<label for="merge-products-keep">{{ $__t('Product to keep') }}&nbsp;<i class="fas fa-question-circle text-muted"
 							data-toggle="tooltip"
+							data-trigger="hover click"
 							title="{{ $__t('After merging, this product will be kept') }}"></i>
 					</label>
 					<select class="custom-control custom-select"
@@ -233,6 +234,7 @@
 				<div class="form-group">
 					<label for="merge-products-remove">{{ $__t('Product to remove') }}&nbsp;<i class="fas fa-question-circle text-muted"
 							data-toggle="tooltip"
+							data-trigger="hover click"
 							title="{{ $__t('After merging, all occurences of this product will be replaced by "Product to keep" (means this product will not exist anymore)') }}"></i>
 					</label>
 					<select class="custom-control custom-select"
diff --git a/views/recipeform.blade.php b/views/recipeform.blade.php
index c272383b..b9792f9c 100644
--- a/views/recipeform.blade.php
+++ b/views/recipeform.blade.php
@@ -72,6 +72,7 @@
 						{{ $__t('Do not check against the shopping list when adding missing items to it') }}&nbsp;
 						<i class="fas fa-question-circle text-muted"
 							data-toggle="tooltip"
+							data-trigger="hover click"
 							title="{{ $__t('By default the amount to be added to the shopping list is "needed amount - stock amount - shopping list amount" - when this is enabled, it is only checked against the stock amount, not against what is already on the shopping list') }}"></i>
 					</label>
 				</div>
diff --git a/views/recipeposform.blade.php b/views/recipeposform.blade.php
index d6e5f091..a535628f 100644
--- a/views/recipeposform.blade.php
+++ b/views/recipeposform.blade.php
@@ -58,6 +58,7 @@
 					<label class="form-check-label custom-control-label"
 						for="only_check_single_unit_in_stock">{{ $__t('Only check if any amount is in stock') }}&nbsp;<i class="fas fa-question-circle text-muted"
 							data-toggle="tooltip"
+							data-trigger="hover click"
 							title="{{ $__t('A different amount/unit can then be used below while for stock fulfillment checking it is sufficient when any amount of the product in stock') }}"></i></label>
 				</div>
 			</div>
@@ -73,6 +74,7 @@
 			<div class="form-group">
 				<label for="variable_amount">{{ $__t('Variable amount') }}&nbsp;<i class="fas fa-question-circle text-muted"
 						data-toggle="tooltip"
+						data-trigger="hover click"
 						title="{{ $__t('When this is not empty, it will be shown instead of the amount entered above while the amount there will still be used for stock fulfillment checking') }}"></i></label>
 				<input type="text"
 					class="form-control"
@@ -94,6 +96,7 @@
 			<div class="form-group">
 				<label for="ingredient_group">{{ $__t('Group') }}&nbsp;<i class="fas fa-question-circle text-muted"
 						data-toggle="tooltip"
+						data-trigger="hover click"
 						title="{{ $__t('This will be used as a headline to group ingredients together') }}"></i></label>
 				<input type="text"
 					class="form-control"
diff --git a/views/recipes.blade.php b/views/recipes.blade.php
index 443bdd66..4e3b57d1 100644
--- a/views/recipes.blade.php
+++ b/views/recipes.blade.php
@@ -314,6 +314,7 @@
 								<label>{{ $__t('Energy (kcal)') }}</label>&nbsp;
 								<i class="fas fa-question-circle text-muted d-print-none"
 									data-toggle="tooltip"
+									data-trigger="hover click"
 									title="{{ $__t('per serving') }}"></i>
 								<h3 class="locale-number locale-number-generic pt-0">{{ $calories }}</h3>
 							</div>
@@ -323,6 +324,7 @@
 								<label>{{ $__t('Costs') }}&nbsp;
 									<i class="fas fa-question-circle text-muted d-print-none"
 										data-toggle="tooltip"
+										data-trigger="hover click"
 										title="{{ $__t('Based on the prices of the default consume rule which is "Opened first, then first due first, then first in first out"') }}"></i>
 								</label>
 								<h3 class="locale-number locale-number-currency pt-0">{{ $costs }}</h3>
diff --git a/views/transfer.blade.php b/views/transfer.blade.php
index b35be860..5744d7ee 100644
--- a/views/transfer.blade.php
+++ b/views/transfer.blade.php
@@ -73,6 +73,7 @@
 						for="use_specific_stock_entry">{{ $__t('Use a specific stock item') }}
 						&nbsp;<i class="fas fa-question-circle text-muted"
 							data-toggle="tooltip"
+							data-trigger="hover click"
 							title="{{ $__t('The first item in this list would be picked by the default rule which is "Opened first, then first due first, then first in first out"') }}"></i>
 					</label>
 				</div>
diff --git a/views/userfieldform.blade.php b/views/userfieldform.blade.php
index cd47b182..595a7c79 100644
--- a/views/userfieldform.blade.php
+++ b/views/userfieldform.blade.php
@@ -53,6 +53,7 @@
 					{{ $__t('Name') }}
 					<i class="fas fa-question-circle text-muted"
 						data-toggle="tooltip"
+						data-trigger="hover click"
 						title="{{ $__t('This is the internal field name, e. g. for the API') }}"></i>
 				</label>
 				<input type="text"
@@ -70,6 +71,7 @@
 					{{ $__t('Caption') }}
 					<i class="fas fa-question-circle text-muted"
 						data-toggle="tooltip"
+						data-trigger="hover click"
 						title="{{ $__t('This is used to display the field on the frontend') }}"></i>
 				</label>
 				<input type="text"