[mod] preferences: a tooltip is shown when the mouse is over the engine names

2 files changed, 34 insertions, 9 deletions

diff --git a/searx/templates/oscar/preferences.html b/searx/templates/oscar/preferences.html
index 6253b9858..6d593840a 100644
--- a/searx/templates/oscar/preferences.html
+++ b/searx/templates/oscar/preferences.html
@@ -1,5 +1,15 @@
 {% from 'oscar/macros.html' import preferences_item_header, preferences_item_header_rtl, preferences_item_footer, preferences_item_footer_rtl, checkbox_toggle, support_toggle, custom_select_class %}
 {% extends "oscar/base.html" %}
+{% macro engine_about(search_engine, id) -%}
+{% if search_engine.about is defined %}
+{% set about = search_engine.about %}
+<div class="engine-tooltip" role="tooltip" id="{{ id }}">{{- "" -}}
+    <h5><a href="{{about.website}}" rel="noreferrer">{{about.website}}</a></h5>
+    {%- if about.wikidata_id -%}<p><a href="https://www.wikidata.org/wiki/{{about.wikidata_id}}" rel="noreferrer">wikidata.org/wiki/{{about.wikidata_id}}</a></p>{%- endif -%}
+    {%- if search_engine.enable_http %}<p>{{ icon('exclamation-sign', 'No HTTPS') }}{{ _('No HTTPS')}}</p>{% endif -%}
+</div>
+{%- endif -%}
+{%- endmacro %}
 {% block title %}{{ _('preferences') }} - {% endblock %}
 {% block content %}
 
@@ -227,11 +237,15 @@
                             {% if not search_engine.private %}
                                 <tr>
                                     {% if not rtl %}
-                                    <td class="onoff-checkbox">
-                                        {{ checkbox_toggle('engine_' + search_engine.name|replace(' ', '_') + '__' + categ|replace(' ', '_'), (search_engine.name, categ) in disabled_engines) }}
-                                    </td>
-                                    <th scope="row">{% if search_engine.enable_http %}{{ icon('exclamation-sign', 'No HTTPS') }}{% endif %} {{ search_engine.name }}</td></th>
-                                    <td class="name">{{ shortcuts[search_engine.name] }}
+                                        <td class="onoff-checkbox">
+                                        {{- checkbox_toggle('engine_' + search_engine.name|replace(' ', '_') + '__' + categ|replace(' ', '_'), (search_engine.name, categ) in disabled_engines) -}}
+                                        </td>
+                                        <th scope="row"><span aria-labelledby="{{ 'tooltip_' + categ + '_' + search_engine.name }}">
+                                            {%- if search_engine.enable_http %}{{ icon('exclamation-sign', 'No HTTPS') }}{% endif -%}
+                                            {{- search_engine.name -}}</span>
+                                            {{- engine_about(search_engine, 'tooltip_' + categ + '_' + search_engine.name) -}}
+                                        </th>
+                                        <td class="name">{{ shortcuts[search_engine.name] }}</td>
                                         <td>{{ support_toggle(stats[search_engine.name].supports_selected_language) }}</td>
                                         <td>{{ support_toggle(search_engine.safesearch==True) }}</td>
                                         <td>{{ support_toggle(search_engine.time_range_support==True) }}</td>
@@ -244,10 +258,10 @@
                                         <td>{{ support_toggle(search_engine.safesearch==True) }}</td>
                                         <td>{{ support_toggle(stats[search_engine.name].supports_selected_language) }}</td>
                                         <td>{{ shortcuts[search_engine.name] }}</td>
-                                    <th scope="row">{{ search_engine.name }}</th>
-                                    <td class="onoff-checkbox">
+                                        <th scope="row"><span>{% if search_engine.enable_http %}{{ icon('exclamation-sign', 'No HTTPS') }}{% endif %}{{ search_engine.name }}</span>{{ engine_about(search_engine) }}</th>
+                                        <td class="onoff-checkbox">
                                         {{ checkbox_toggle('engine_' + search_engine.name|replace(' ', '_') + '__' + categ|replace(' ', '_'), (search_engine.name, categ) in disabled_engines) }}
-                                    </td>
+                                        </td>
                                     {% endif %}
                                 </tr>
                             {% endif %}
diff --git a/searx/templates/simple/preferences.html b/searx/templates/simple/preferences.html
index dff7ffba6..2d2529417 100644
--- a/searx/templates/simple/preferences.html
+++ b/searx/templates/simple/preferences.html
@@ -18,6 +18,17 @@
 {%- endfor -%}
 {%- endmacro -%}
 
+{% macro engine_about(search_engine) -%}
+{% if search_engine.about is defined %}
+{% set about = search_engine.about %}
+<div class="engine-tooltip" role="tooltip">{{- "" -}}
+    <p><a href="{{about.website}}" rel="noreferrer">{{about.website}}</a></p>
+    {%- if about.wikidata_id -%}<p><a href="https://www.wikidata.org/wiki/{{about.wikidata_id}}" rel="noreferrer">wikidata.org/wiki/{{about.wikidata_id}}</a></p>{%- endif -%}
+    {%- if search_engine.enable_http %}<p>{{ icon('exclamation-sign', 'No HTTPS') }}{{ _('No HTTPS')}}</p>{% endif -%}
+</div>
+{%- endif -%}
+{%- endmacro %}
+
 {% block head %} {% endblock %}
 {% block content %}
 
@@ -121,7 +132,7 @@
       {% set engine_id = 'engine_' + search_engine.name|replace(' ', '_') + '__' + categ|replace(' ', '_') %}
       <tr>
         <td class="engine_checkbox">{{ checkbox_onoff(engine_id, (search_engine.name, categ) in disabled_engines) }}</td>
-        <th class="name">{% if search_engine.enable_http %}{{ icon('warning', 'No HTTPS') }}{% endif %} {{ search_engine.name }}</th>
+        <th class="name">{% if search_engine.enable_http %}{{ icon('warning', 'No HTTPS') }}{% endif %} {{ search_engine.name }} {{ engine_about(search_engine) }}</th>
         <td class="shortcut">{{ shortcuts[search_engine.name] }}</td>
         <td>{{ checkbox(engine_id + '_supported_languages', current_language == 'all' or current_language in search_engine.supported_languages or current_language.split('-')[0] in search_engine.supported_languages, true, true) }}</td>
         <td>{{ checkbox(engine_id + '_safesearch', search_engine.safesearch==True, true, true) }}</td>