Extract Functions.tooltip() into modules/tooltip.js

Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>

js/src/database/structure.js

@@ -3,6 +3,7 @@ import { AJAX } from '../modules/ajax.js';
 import { Functions } from '../modules/functions.js';
 import { Navigation } from '../modules/navigation.js';
 import { CommonParams } from '../modules/common.js';
+import tooltip from '../modules/tooltip.js';
 
 /**
  * @fileoverview    functions used on the database structure page
@@ -424,11 +425,7 @@ AJAX.registerOnload('database/structure.js', function () {
 
     // Add tooltip to favorite icons.
     $('.favorite_table_anchor').each(function () {
-        Functions.tooltip(
-            $(this),
-            'a',
-            $(this).attr('title')
-        );
+        tooltip($(this), 'a', $(this).attr('title'));
     });
 
     // Get real row count via Ajax.

js/src/makegrid.js

@@ -2,6 +2,7 @@ import $ from 'jquery';
 import { AJAX } from './modules/ajax.js';
 import { Functions } from './modules/functions.js';
 import { CommonParams } from './modules/common.js';
+import tooltip from './modules/tooltip.js';
 
 /* global Sql */
 /* global firstDayOfCalendar */ // templates/javascript/variables.twig
@@ -1738,11 +1739,7 @@ window.makeGrid = function (t, enableResize, enableReorder, enableVisib, enableG
             // make sure we have more than one column
             if ($firstRowCols.length > 1) {
                 var $colVisibTh = $(g.t).find('th:not(.draggable)').slice(0, 1);
-                Functions.tooltip(
-                    $colVisibTh,
-                    'th',
-                    window.Messages.strColVisibHint
-                );
+                tooltip($colVisibTh, 'th', window.Messages.strColVisibHint);
 
                 // create column visibility drop-down arrow(s)
                 $colVisibTh.each(function () {
@@ -2252,11 +2249,7 @@ window.makeGrid = function (t, enableResize, enableReorder, enableVisib, enableG
     }
 
     // create tooltip for each <th> with draggable class
-    Functions.tooltip(
-        $(t).find('th.draggable'),
-        'th',
-        g.updateHint()
-    );
+    tooltip($(t).find('th.draggable'), 'th', g.updateHint());
 
     // register events for hint tooltip (anchors inside draggable th)
     $(t).find('th.draggable a')

js/src/modules/functions.js

@@ -6,6 +6,7 @@ import { mysqlDocKeyword, mysqlDocBuiltin } from './doc-links.js';
 import { Indexes } from './indexes.js';
 import { Config } from './config.js';
 import { resizeTopMenu } from './menu-resizer.js';
+import tooltip from './tooltip.js';
 
 /* global ChartType, ColumnType, DataTable, JQPlotChartFactory */ // js/chart.js
 /* global DatabaseStructure */ // js/database/structure.js
@@ -198,7 +199,7 @@ Functions.addDatepicker = function ($thisElement, type, options) {
     if (type === 'time') {
         $thisElement.timepicker($.extend(defaultOptions, options));
         // Add a tip regarding entering MySQL allowed-values for TIME data-type
-        Functions.tooltip($thisElement, 'input', window.Messages.strMysqlAllowedValuesTipTime);
+        tooltip($thisElement, 'input', window.Messages.strMysqlAllowedValuesTipTime);
     } else {
         $thisElement.datetimepicker($.extend(defaultOptions, options));
     }
@@ -242,9 +243,9 @@ Functions.addDateTimePicker = function () {
             // Add a tip regarding entering MySQL allowed-values
             // for TIME and DATE data-type
             if ($(this).hasClass('timefield')) {
-                Functions.tooltip($(this), 'input', window.Messages.strMysqlAllowedValuesTipTime);
+                tooltip($(this), 'input', window.Messages.strMysqlAllowedValuesTipTime);
             } else if ($(this).hasClass('datefield')) {
-                Functions.tooltip($(this), 'input', window.Messages.strMysqlAllowedValuesTipDate);
+                tooltip($(this), 'input', window.Messages.strMysqlAllowedValuesTipDate);
             }
         });
     }
@@ -364,33 +365,6 @@ Functions.clearSelection = function () {
     }
 };
 
-/**
- * Create a jQuery UI tooltip
- *
- * @param $elements     jQuery object representing the elements
- * @param item          the item
- *                      (see https://api.jqueryui.com/tooltip/#option-items)
- * @param myContent     content of the tooltip
- * @param additionalOptions to override the default options
- *
- */
-Functions.tooltip = function ($elements, item, myContent, additionalOptions) {
-    if ($('#no_hint').length > 0) {
-        return;
-    }
-
-    var defaultOptions = {
-        content: myContent,
-        items: item,
-        tooltipClass: 'tooltip',
-        track: true,
-        show: false,
-        hide: false
-    };
-
-    $elements.uiTooltip($.extend(true, defaultOptions, additionalOptions));
-};
-
 /**
  * @param {string} value
  * @return {string}
@@ -1675,11 +1649,7 @@ Functions.ajaxShowMessage = function (message = null, timeout = null, type = nul
          * Add a tooltip to the notification to let the user know that they
          * can dismiss the ajax notification by clicking on it.
          */
-        Functions.tooltip(
-            $retval,
-            'span',
-            window.Messages.strDismiss
-        );
+        tooltip($retval, 'span', window.Messages.strDismiss);
     }
     // Hide spinner if this is not a loading message
     if (msg !== window.Messages.strLoading) {
@@ -3293,11 +3263,7 @@ Functions.showHints = function ($div) {
         $newDiv = $('body');
     }
     $newDiv.find('.pma_hint').each(function () {
-        Functions.tooltip(
-            $(this).children('img'),
-            'img',
-            $(this).children('span').html()
-        );
+        tooltip($(this).children('img'), 'img', $(this).children('span').html());
     });
 };
 

js/src/modules/navigation.js

@@ -3,6 +3,7 @@ import { Functions } from './functions.js';
 import { CommonParams } from './common.js';
 import { Config } from './config.js';
 import { resizeTopMenu } from './menu-resizer.js';
+import tooltip from './tooltip.js';
 
 /**
  * function used in or for navigation panel
@@ -547,11 +548,7 @@ Navigation.onload = () => function () {
                 if (data.changes) {
                     $('#pma_favorite_list').html(data.list);
                     $('#' + anchorId).parent().html(data.anchor);
-                    Functions.tooltip(
-                        $('#' + anchorId),
-                        'a',
-                        $('#' + anchorId).attr('title')
-                    );
+                    tooltip($('#' + anchorId), 'a', $('#' + anchorId).attr('title'));
                     // Update localStorage.
                     if (Config.isStorageSupported('localStorage')) {
                         window.localStorage.favoriteTables = data.favoriteTables;

js/src/modules/tooltip.js

@@ -0,0 +1,28 @@
+import $ from 'jquery';
+
+/**
+ * Create a jQuery UI tooltip
+ *
+ * @param $elements jQuery object representing the elements
+ * @param {string} item the item (see https://api.jqueryui.com/tooltip/#option-items)
+ * @param myContent content of the tooltip
+ * @param {Object} additionalOptions to override the default options
+ *
+ * @return {void}
+ */
+export default function tooltip ($elements, item, myContent, additionalOptions = {}) {
+    if ($('#no_hint').length > 0) {
+        return;
+    }
+
+    const defaultOptions = {
+        content: myContent,
+        items: item,
+        tooltipClass: 'tooltip',
+        track: true,
+        show: false,
+        hide: false
+    };
+
+    $elements.uiTooltip($.extend(true, defaultOptions, additionalOptions));
+}

js/src/server/status/monitor.js

@@ -3,6 +3,7 @@ import { AJAX } from '../../modules/ajax.js';
 import { Functions } from '../../modules/functions.js';
 import { CommonParams } from '../../modules/common.js';
 import { Config } from '../../modules/config.js';
+import tooltip from '../../modules/tooltip.js';
 
 /**
  * @fileoverview    Javascript functions used in server status monitor page
@@ -2089,11 +2090,7 @@ AJAX.registerOnload('server/status/monitor.js', function () {
                 tooltipContent += '<p>' + window.Messages.strMoreCountColumnExplanation + '</p>';
             }
 
-            Functions.tooltip(
-                $('img.qroupedQueryInfoIcon'),
-                'img',
-                tooltipContent
-            );
+            tooltip($('img.qroupedQueryInfoIcon'), 'img', tooltipContent);
         }
 
         $('#logTable').find('table').tablesorter({