Trigger help-tooltips also by click (instead of only hover, which is Bootstraps default) (fixes #1468)

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

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)

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)
 {

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>

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">

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">

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>

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 !!}

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"

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>

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>

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'

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">

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>

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>

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>

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"

views/recipeform.blade.php

@@ -72,6 +72,7 @@
 						{{ $__t('Do not check against the shopping list when adding missing items to it') }} 
 						<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>

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"

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>

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>

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"