diff --git a/js/src/database/structure.js b/js/src/database/structure.js index b6a8248085..1dc030cb42 100644 --- a/js/src/database/structure.js +++ b/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. diff --git a/js/src/makegrid.js b/js/src/makegrid.js index 56f154604d..1747f8d8f1 100644 --- a/js/src/makegrid.js +++ b/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 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') diff --git a/js/src/modules/functions.js b/js/src/modules/functions.js index 7540502426..0fefd67525 100644 --- a/js/src/modules/functions.js +++ b/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()); }); }; diff --git a/js/src/modules/navigation.js b/js/src/modules/navigation.js index 94568ef203..0e7569e848 100644 --- a/js/src/modules/navigation.js +++ b/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; diff --git a/js/src/modules/tooltip.js b/js/src/modules/tooltip.js new file mode 100644 index 0000000000..7c3afcb311 --- /dev/null +++ b/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)); +} diff --git a/js/src/server/status/monitor.js b/js/src/server/status/monitor.js index 59e7765028..676f354084 100644 --- a/js/src/server/status/monitor.js +++ b/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 += '

' + window.Messages.strMoreCountColumnExplanation + '

'; } - Functions.tooltip( - $('img.qroupedQueryInfoIcon'), - 'img', - tooltipContent - ); + tooltip($('img.qroupedQueryInfoIcon'), 'img', tooltipContent); } $('#logTable').find('table').tablesorter({