From 2a2172037ecb2467ee5e7053ae1c8a519f58504e Mon Sep 17 00:00:00 2001
From: Yassine Guedidi <yassine@guedidi.com>
Date: Sat, 1 Mar 2025 00:14:40 +0100
Subject: [PATCH] Extract Materialize Tooltip controller

---
 .../materialize/tooltip_controller.js          | 12 ++++++++++++
 assets/index.js                                |  1 -
 templates/Config/index.html.twig               | 18 +++++++++---------
 templates/Entry/entries.html.twig              |  8 ++++----
 templates/layout.html.twig                     |  6 +++---
 5 files changed, 28 insertions(+), 17 deletions(-)
 create mode 100644 assets/controllers/materialize/tooltip_controller.js

diff --git a/assets/controllers/materialize/tooltip_controller.js b/assets/controllers/materialize/tooltip_controller.js
new file mode 100644
index 000000000..99f2acf3a
--- /dev/null
+++ b/assets/controllers/materialize/tooltip_controller.js
@@ -0,0 +1,12 @@
+import { Controller } from '@hotwired/stimulus';
+import M from '@materializecss/materialize';
+
+export default class extends Controller {
+  connect() {
+    this.instance = M.Tooltip.init(this.element);
+  }
+
+  disconnect() {
+    this.instance.destroy();
+  }
+}
diff --git a/assets/index.js b/assets/index.js
index a40231542..675db5dab 100755
--- a/assets/index.js
+++ b/assets/index.js
@@ -285,7 +285,6 @@ $(document).ready(() => {
     constrainWidth: false,
   });
 
-  $('.tooltipped').tooltip();
   $('.fixed-action-btn').floatingActionButton();
 
   stickyNav();
diff --git a/templates/Config/index.html.twig b/templates/Config/index.html.twig
index 1b4a6a055..585725a19 100644
--- a/templates/Config/index.html.twig
+++ b/templates/Config/index.html.twig
@@ -32,7 +32,7 @@
                                 {{ form_label(form.config.items_per_page) }}
                             </div>
                             <div class="input-field col s1">
-                                <a href="#" class="tooltipped" data-position="left" data-delay="50" data-tooltip="{{ 'config.form_settings.help_items_per_page'|trans }}">
+                                <a href="#" data-controller="materialize--tooltip" data-position="left" data-delay="50" data-tooltip="{{ 'config.form_settings.help_items_per_page'|trans }}">
                                     <i class="material-icons">live_help</i>
                                 </a>
                             </div>
@@ -47,7 +47,7 @@
                                 </label>
                             </div>
                             <div class="input-field col s1">
-                                <a href="#" class="tooltipped" data-position="left" data-delay="50" data-tooltip="{{ 'config.form_settings.help_display_thumbnails'|trans }}">
+                                <a href="#" data-controller="materialize--tooltip" data-position="left" data-delay="50" data-tooltip="{{ 'config.form_settings.help_display_thumbnails'|trans }}">
                                     <i class="material-icons">live_help</i>
                                 </a>
                             </div>
@@ -64,7 +64,7 @@
                                     </p>
                                 </div>
                                 <div class="input-field col s1">
-                                    <a href="#" class="tooltipped" data-position="left" data-delay="50" data-tooltip="{{ 'config.form_settings.help_reading_speed'|trans }}">
+                                    <a href="#" data-controller="materialize--tooltip" data-position="left" data-delay="50" data-tooltip="{{ 'config.form_settings.help_reading_speed'|trans }}">
                                         <i class="material-icons">live_help</i>
                                     </a>
                                 </div>
@@ -85,7 +85,7 @@
                                     {{ form_label(form.config.language) }}
                                 </div>
                                 <div class="input-field col s1">
-                                    <a href="#" class="tooltipped" data-position="left" data-delay="50" data-tooltip="{{ 'config.form_settings.help_language'|trans }}">
+                                    <a href="#" data-controller="materialize--tooltip" data-position="left" data-delay="50" data-tooltip="{{ 'config.form_settings.help_language'|trans }}">
                                         <i class="material-icons">live_help</i>
                                     </a>
                                 </div>
@@ -102,7 +102,7 @@
                                     </p>
                                 </div>
                                 <div class="input-field col s1">
-                                    <a href="#" class="tooltipped" data-position="left" data-delay="50" data-tooltip="{{ 'config.form_settings.help_pocket_consumer_key'|trans }}">
+                                    <a href="#" data-controller="materialize--tooltip" data-position="left" data-delay="50" data-tooltip="{{ 'config.form_settings.help_pocket_consumer_key'|trans }}">
                                         <i class="material-icons">live_help</i>
                                     </a>
                                 </div>
@@ -125,7 +125,7 @@
                                     {{ form_label(form.config.font) }}
                                 </div>
                                 <div class="input-field col s1">
-                                    <a href="#" class="tooltipped" data-position="left" data-delay="50" data-tooltip="{{ 'config.form_settings.help_font'|trans }}">
+                                    <a href="#" data-controller="materialize--tooltip" data-position="left" data-delay="50" data-tooltip="{{ 'config.form_settings.help_font'|trans }}">
                                         <i class="material-icons">live_help</i>
                                     </a>
                                 </div>
@@ -136,7 +136,7 @@
                                     {{ form_label(form.config.lineHeight, null, {'label_attr': {'class': 'settings-range-label'}}) }}
                                 </div>
                                 <div class="input-field col s1">
-                                    <a href="#" class="tooltipped" data-position="left" data-delay="50" data-tooltip="{{ 'config.form_settings.help_lineheight'|trans }}">
+                                    <a href="#" data-controller="materialize--tooltip" data-position="left" data-delay="50" data-tooltip="{{ 'config.form_settings.help_lineheight'|trans }}">
                                         <i class="material-icons">live_help</i>
                                     </a>
                                 </div>
@@ -149,7 +149,7 @@
                                     {{ form_label(form.config.fontsize, null, {'label_attr': {'class': 'settings-range-label'}}) }}
                                 </div>
                                 <div class="input-field col s1">
-                                    <a href="#" class="tooltipped" data-position="left" data-delay="50" data-tooltip="{{ 'config.form_settings.help_fontsize'|trans }}">
+                                    <a href="#" data-controller="materialize--tooltip" data-position="left" data-delay="50" data-tooltip="{{ 'config.form_settings.help_fontsize'|trans }}">
                                         <i class="material-icons">live_help</i>
                                     </a>
                                 </div>
@@ -160,7 +160,7 @@
                                     {{ form_label(form.config.maxWidth, null, {'label_attr': {'class': 'settings-range-label'}}) }}
                                 </div>
                                 <div class="input-field col s1">
-                                    <a href="#" class="tooltipped" data-position="left" data-delay="50" data-tooltip="{{ 'config.form_settings.help_maxwidth'|trans }}">
+                                    <a href="#" data-controller="materialize--tooltip" data-position="left" data-delay="50" data-tooltip="{{ 'config.form_settings.help_maxwidth'|trans }}">
                                         <i class="material-icons">live_help</i>
                                     </a>
                                 </div>
diff --git a/templates/Entry/entries.html.twig b/templates/Entry/entries.html.twig
index d6805027f..59027431f 100644
--- a/templates/Entry/entries.html.twig
+++ b/templates/Entry/entries.html.twig
@@ -24,21 +24,21 @@
 {% block nav_panel_extra_actions %}
     {% if active_route %}
         <li>
-            <a class="waves-effect tooltipped js-random-action" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.random_entry'|trans }}" href="{{ path('random_entry', {'type': active_route}) }}">
+            <a class="waves-effect js-random-action" data-controller="materialize--tooltip" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.random_entry'|trans }}" href="{{ path('random_entry', {'type': active_route}) }}">
                 <i class="material-icons">casino</i>
             </a>
         </li>
     {% endif %}
     {% if has_filters %}
         <li class="button-filters">
-            <a class="nav-panel-menu sidenav-trigger tooltipped js-filters-action" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.filter_entries'|trans }}" href="#" data-target="filters">
+            <a class="nav-panel-menu sidenav-trigger js-filters-action" data-controller="materialize--tooltip" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.filter_entries'|trans }}" href="#" data-target="filters">
                 <i class="material-icons">filter_list</i>
             </a>
         </li>
     {% endif %}
     {% if has_exports %}
         <li class="button-export">
-            <a class="nav-panel-menu sidenav-trigger tooltipped js-export-action" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.export'|trans }}" href="#" data-target="export">
+            <a class="nav-panel-menu sidenav-trigger js-export-action" data-controller="materialize--tooltip" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.export'|trans }}" href="#" data-target="export">
                 <i class="material-icons">file_download</i>
             </a>
         </li>
@@ -61,7 +61,7 @@
                 <a class="results-item" href="{{ path('switch_view_mode', {redirect: current_path}) }}"><i class="material-icons">{% if list_mode == 0 %}view_list{% else %}view_module{% endif %}</i></a>
             {% endif %}
             {% if entries.count > 0 and is_granted('EDIT_ENTRIES') %}
-                <label for="mass-action-inputs-displayed" class="mass-action-toggle results-item tooltipped" data-position="right" data-delay="50" data-tooltip="{{ 'entry.list.toggle_mass_action'|trans }}"><i class="material-icons">library_add_check</i></label>
+                <label for="mass-action-inputs-displayed" class="mass-action-toggle results-item" data-controller="materialize--tooltip" data-position="right" data-delay="50" data-tooltip="{{ 'entry.list.toggle_mass_action'|trans }}"><i class="material-icons">library_add_check</i></label>
             {% endif %}
             {% if app.user.config.feedToken %}
                 {% include "Entry/_feed_link.html.twig" %}
diff --git a/templates/layout.html.twig b/templates/layout.html.twig
index debb71ac9..172dab47a 100644
--- a/templates/layout.html.twig
+++ b/templates/layout.html.twig
@@ -90,18 +90,18 @@
                 </div>
                 <ul class="input-field nav-panel-buttom">
                     <li class="bold toggle-add-url-container">
-                        <a class="waves-effect tooltipped toggle-add-url" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.add_new_entry'|trans }}" href="{{ path('new') }}" id="nav-btn-add">
+                        <a class="waves-effect toggle-add-url" data-controller="materialize--tooltip" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.add_new_entry'|trans }}" href="{{ path('new') }}" id="nav-btn-add">
                             <i class="material-icons">add</i>
                         </a>
                     </li>
                     <li>
-                        <a class="waves-effect tooltipped" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.search'|trans }}" href="javascript: void(null);" id="nav-btn-search">
+                        <a class="waves-effect" data-controller="materialize--tooltip" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.search'|trans }}" href="javascript: void(null);" id="nav-btn-search">
                             <i class="material-icons">search</i>
                         </a>
                     </li>
                     {% block nav_panel_extra_actions '' %}
                     <li class="bold">
-                        <a class="wave-effect tooltipped dropdown-trigger" data-covertrigger="false" data-constrainwidth="false" data-target="dropdown-account" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.account'|trans }}" href="#" id="news_menu">
+                        <a class="wave-effect dropdown-trigger" data-controller="materialize--tooltip" data-covertrigger="false" data-constrainwidth="false" data-target="dropdown-account" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.account'|trans }}" href="#" id="news_menu">
                             <i class="material-icons" id="news_link">account_circle</i>
                         </a>
                     </li>