Add tooltips to Hide comment type settings where necessary (#21306)

Previously, this setting was pretty confusing for users, especially the
difference between "reference" and "issue reference".
Related: #21321.

Author: delvh

options/locale/locale_en-US.ini

@@ -611,6 +611,9 @@ cancel = Cancel
 language = Language
 ui = Theme
 hidden_comment_types = Hidden comment types
+hidden_comment_types_description = Comment types checked here will not be shown inside issue pages. Checking "Label" for example removes all "<user> added/removed <label>" comments.
+hidden_comment_types.ref_tooltip = Comments where this issue was referenced from another issue/commit/…
+hidden_comment_types.issue_ref_tooltip = Comments where the user changes the branch/tag associated with the issue
 comment_type_group_reference = Reference
 comment_type_group_label = Label
 comment_type_group_milestone = Milestone

templates/user/settings/appearance.tmpl

@@ -74,10 +74,13 @@
 			{{.locale.Tr "settings.hidden_comment_types"}}
 		</h4>
 		<div class="ui attached segment">
+			<p class="help">
+				{{.locale.Tr "settings.hidden_comment_types_description"}}
+			</p>
 			<form class="ui form" action="{{.Link}}/hidden_comments" method="post">
 				{{.CsrfTokenHtml}}
 				<div class="inline field">
-					<div class="ui checkbox">
+					<div class="ui checkbox" data-tooltip-content="{{.locale.Tr "settings.hidden_comment_types.ref_tooltip"}}">
 						<input name="reference" type="checkbox" {{if(call .IsCommentTypeGroupChecked "reference")}}checked{{end}}>
 						<label>{{.locale.Tr "settings.comment_type_group_reference"}}</label>
 					</div>
@@ -156,7 +159,7 @@
 					</div>
 				</div>
 				<div class="inline field">
-					<div class="ui checkbox">
+					<div class="ui checkbox" data-tooltip-content="{{.locale.Tr "settings.hidden_comment_types.issue_ref_tooltip"}}">
 						<input name="issue_ref" type="checkbox" {{if (call .IsCommentTypeGroupChecked "issue_ref")}}checked{{end}}>
 						<label>{{.locale.Tr "settings.comment_type_group_issue_ref"}}</label>
 					</div>