Cleanup and use global style on popups (#17674)

* Cleanup and use global style on popups

- Fix typo 'poping' to 'popping'
- Remove most inline 'data-variation' attributes
- Initialize all popups with 'inverted tiny' variation

* misc tweaks

* rename to .tooltip, use jQuery

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

2 files changed, 14 insertions, 6 deletions

diff --git a/web_src/js/components/DashboardRepoList.js b/web_src/js/components/DashboardRepoList.js
index 12e2ee3cc6..52d9f879ea 100644
--- a/web_src/js/components/DashboardRepoList.js
+++ b/web_src/js/components/DashboardRepoList.js
@@ -137,7 +137,7 @@ function initVueComponents() {
 
     mounted() {
       this.changeReposFilter(this.reposFilter);
-      $(this.$el).find('.poping.up').popup();
+      $(this.$el).find('.tooltip').popup();
       $(this.$el).find('.dropdown').dropdown();
       this.setCheckboxes();
       Vue.nextTick(() => {
diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index ac9d0cc92d..92c9fb8155 100644
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@@ -62,9 +62,8 @@ export function initGlobalCommon() {
   // Show exact time
   $('.time-since').each(function () {
     $(this)
-      .addClass('poping up')
+      .addClass('tooltip')
       .attr('data-content', $(this).attr('title'))
-      .attr('data-variation', 'inverted tiny')
       .attr('title', '');
   });
 
@@ -88,7 +87,7 @@ export function initGlobalCommon() {
   $('.jump.dropdown').dropdown({
     action: 'hide',
     onShow() {
-      $('.poping.up').popup('hide');
+      $('.tooltip').popup('hide');
     },
     fullTextSearch: 'exact'
   });
@@ -104,8 +103,17 @@ export function initGlobalCommon() {
   $('.ui.progress').progress({
     showActivity: false
   });
-  $('.poping.up').attr('data-variation', 'inverted tiny').popup();
-  $('.top.menu .poping.up').popup({
+
+  // init popups
+  $('.tooltip').each((_, el) => {
+    const $el = $(el);
+    const attr = $el.attr('data-variation');
+    const attrs = attr ? attr.split(' ') : [];
+    const variations = new Set([...attrs, 'inverted', 'tiny']);
+    $el.attr('data-variation', [...variations].join(' ')).popup();
+  });
+
+  $('.top.menu .tooltip').popup({
     onShow() {
       if ($('.top.menu .menu.transition').hasClass('visible')) {
         return false;