Init popup for new code comment (#20234) (#20235)

- Backport #20234
 
  - Initialize the popup for the tooltip inside the new code comment.
  - This works and is good enough to have this issue fixed for 1.17
 
Fix #20068

web_src/js/features/common-global.js

@@ -75,6 +75,20 @@ export function initGlobalButtonClickOnEnter() {
   });
 }
 
+export function initPopup(target) {
+  const $el = $(target);
+  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();
+}
+
+export function initGlobalPopups() {
+  $('.tooltip').each((_, el) => {
+    initPopup(el);
+  });
+}
+
 export function initGlobalCommon() {
   // Show exact time
   $('.time-since').each(function () {
@@ -121,15 +135,6 @@ export function initGlobalCommon() {
 
   $('.ui.checkbox').checkbox();
 
-  // 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')) {

web_src/js/features/repo-diff.js

@@ -3,6 +3,7 @@ import {initCompReactionSelector} from './comp/ReactionSelector.js';
 import {initRepoIssueContentHistory} from './repo-issue-content.js';
 import {validateTextareaNonEmpty} from './comp/EasyMDE.js';
 import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles} from './pull-view-file.js';
+import {initPopup} from './common-global.js';
 
 const {csrfToken} = window.config;
 
@@ -52,6 +53,7 @@ export function initRepoDiffConversationForm() {
     const newConversationHolder = $(await $.post(form.attr('action'), form.serialize()));
     const {path, side, idx} = newConversationHolder.data();
 
+    initPopup(newConversationHolder.find('.tooltip'));
     form.closest('.conversation-holder').replaceWith(newConversationHolder);
     if (form.closest('tr').data('line-type') === 'same') {
       $(`[data-path="${path}"] a.add-code-comment[data-idx="${idx}"]`).addClass('invisible');

web_src/js/index.js

@@ -55,6 +55,7 @@ import {
   initGlobalEnterQuickSubmit,
   initGlobalFormDirtyLeaveConfirm,
   initGlobalLinkActions,
+  initGlobalPopups,
   initHeadNavbarContentToggle,
 } from './features/common-global.js';
 import {initRepoTopicBar} from './features/repo-home.js';
@@ -99,6 +100,7 @@ initVueEnv();
 $(document).ready(() => {
   initGlobalCommon();
 
+  initGlobalPopups();
   initGlobalButtonClickOnEnter();
   initGlobalButtons();
   initGlobalCopyToClipboardListener();