Replace fomantic popup module with tippy.js (#20428)

- replace fomantic popup module with tippy.js
- fix chaining and add comment
- add 100ms delay to tooltips
- stopwatch improvments, raise default maxWidth
- update web_src/js/features/common-global.js
- use type=submit instead of js

templates/admin/user/edit.tmpl

@@ -117,7 +117,7 @@
 					</div>
 				</div>
 				<div class="inline field"{{if DisableGitHooks}} hidden{{end}}>
-					<div class="ui checkbox tooltip" data-content="{{.locale.Tr "admin.users.allow_git_hook_tooltip"}}" data-variation="very wide">
+					<div class="ui checkbox tooltip" data-content="{{.locale.Tr "admin.users.allow_git_hook_tooltip"}}">
 						<label><strong>{{.locale.Tr "admin.users.allow_git_hook"}}</strong></label>
 						<input name="allow_git_hook" type="checkbox" {{if .User.CanEditGitHook}}checked{{end}} {{if DisableGitHooks}}disabled{{end}}>
 					</div>

templates/base/head_navbar.tmpl

@@ -86,10 +86,10 @@
 					<span class="sr-mobile-only">{{.locale.Tr "active_stopwatch"}}</span>
 				</span>
 			</a>
-			<div class="ui popup very wide">
+			<div class="active-stopwatch-popup hide">
 				<div class="df ac">
 					<a class="stopwatch-link df ac" href="{{.ActiveStopwatch.IssueLink}}">
-						{{svg "octicon-issue-opened"}}
+						{{svg "octicon-issue-opened" 16 "mr-3"}}
 						<span class="stopwatch-issue">{{.ActiveStopwatch.RepoSlug}}#{{.ActiveStopwatch.IssueIndex}}</span>
 						<span class="ui primary label stopwatch-time my-0 mx-4" data-seconds="{{.ActiveStopwatch.Seconds}}">
 							{{if .ActiveStopwatch}}{{Sec2Time .ActiveStopwatch.Seconds}}{{end}}
@@ -98,6 +98,7 @@
 					<form class="stopwatch-commit" method="POST" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/toggle">
 						{{.CsrfTokenHtml}}
 						<button
+							type="submit"
 							class="ui button mini compact basic icon fitted tooltip"
 							data-content="{{.locale.Tr "repo.issues.stop_tracking"}}"
 							data-position="top right"
@@ -106,6 +107,7 @@
 					<form class="stopwatch-cancel" method="POST" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/cancel">
 						{{.CsrfTokenHtml}}
 						<button
+							type="submit"
 							class="ui button mini compact basic icon fitted tooltip"
 							data-content="{{.locale.Tr "repo.issues.cancel_tracking"}}"
 							data-position="top right"

templates/repo/commit_statuses.tmpl

@@ -1,5 +1,5 @@
 <a class="ui link commit-statuses-trigger">{{template "repo/commit_status" .Status}}</a>
-<div class="ui popup very wide fixed basic commit-statuses">
+<div class="ui commit-statuses-popup commit-statuses hide">
 	<div class="ui relaxed list divided">
 		{{range .Statuses}}
 			<div class="ui item singular-status df">

templates/repo/diff/stats.tmpl

@@ -1,4 +1,4 @@
 {{Add .file.Addition .file.Deletion}}
-<span class="diff-stats-bar tooltip mx-3" data-content="{{.root.locale.Tr "repo.diff.stats_desc_file" (Add .file.Addition .file.Deletion) .file.Addition .file.Deletion | Str2html}}" data-variation="wide">
+<span class="diff-stats-bar tooltip mx-3" data-content="{{.root.locale.Tr "repo.diff.stats_desc_file" (Add .file.Addition .file.Deletion) .file.Addition .file.Deletion | Str2html}}">
 	<div class="diff-stats-add-bar" style="width: {{DiffStatsWidth .file.Addition .file.Deletion}}%"></div>
 </span>

templates/repo/header.tmpl

@@ -98,7 +98,7 @@
 							{{else if and (not $.CanSignedUserFork) (eq (len $.UserAndOrgForks) 0)}}
 								data-content="{{$.locale.Tr "repo.fork_from_self"}}"
 							{{end}}
-						data-position="top center" data-variation="tiny" tabindex="0">
+						data-position="top center" tabindex="0">
 							<a class="ui compact{{if $.ShowForkModal}} show-modal{{end}} small basic button"
 								{{if not $.CanSignedUserFork}}
 									{{if gt (len $.UserAndOrgForks) 1}}

templates/repo/issue/view_content/add_reaction.tmpl

@@ -7,7 +7,7 @@
 		<div class="header">{{ .ctx.locale.Tr "repo.pick_reaction"}}</div>
 		<div class="divider"></div>
 		{{range $value := AllowedReactions}}
-			<div class="item reaction" data-content="{{$value}}">{{ReactionToEmoji $value}}</div>
+			<div class="item reaction tooltip" data-content="{{$value}}">{{ReactionToEmoji $value}}</div>
 		{{end}}
 	</div>
 </div>

templates/repo/settings/deploy_keys.tmpl

@@ -56,7 +56,7 @@
 								</button>
 							</div>
 							<div class="left floated content">
-								<i class="{{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-content="{{$.locale.Tr "settings.key_state_desc"}}" data-variation="inverted"{{end}}>{{svg "octicon-key" 32}}</i>
+								<i class="tooltip{{if .HasRecentActivity}} green{{end}}" {{if .HasRecentActivity}}data-content="{{$.locale.Tr "settings.key_state_desc"}}"{{end}}>{{svg "octicon-key" 32}}</i>
 							</div>
 							<div class="content">
 								<strong>{{.Name}}</strong>

templates/repo/settings/webhook/history.tmpl

@@ -44,7 +44,7 @@
 							<div class="right menu">
 								<form class="item" action="{{$.Link}}/replay/{{.UUID}}" method="post">
 									{{$.CsrfTokenHtml}}
-									<button class="ui tiny button tooltip" data-content="{{$.locale.Tr "repo.settings.webhook.replay.description"}}" data-variation="inverted tiny">{{svg "octicon-sync"}}</button>
+									<button class="ui tiny button tooltip" data-content="{{$.locale.Tr "repo.settings.webhook.replay.description"}}">{{svg "octicon-sync"}}</button>
 								</form>
 							</div>
 							{{end}}

templates/repo/view_file.tmpl

@@ -120,22 +120,12 @@
 						{{end}}
 					</tbody>
 				</table>
-				<div class="code-line-menu ui fluid popup transition hidden">
+				<div class="code-line-menu ui vertical pointing menu hide">
-					<div class="ui column relaxed equal height">
+					{{if $.Permission.CanRead $.UnitTypeIssues}}
-						<div class="column">
+						<a class="item ref-in-new-issue" href="{{.RepoLink}}/issues/new?body={{.Repository.HTMLURL}}{{printf "/src/commit/" }}{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}" rel="nofollow noindex">{{.locale.Tr "repo.issues.context.reference_issue"}}</a>
-							{{if $.Permission.CanRead $.UnitTypeIssues}}
+					{{end}}
-								<div class="ui link list">
+					<a class="item view_git_blame" href="{{.Repository.HTMLURL}}/blame/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}">{{.locale.Tr "repo.view_git_blame"}}</a>
-									<a class="item ref-in-new-issue" href="{{.RepoLink}}/issues/new?body={{.Repository.HTMLURL}}{{printf "/src/commit/" }}{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}" rel="nofollow noindex">{{.locale.Tr "repo.issues.context.reference_issue"}}</a>
+					<a class="item copy-line-permalink" data-url="{{.Repository.HTMLURL}}/src/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}">{{.locale.Tr "repo.file_copy_permalink"}}</a>
-								</div>
-							{{end}}
-							<div class="ui link list">
-								<a class="item view_git_blame" href="{{.Repository.HTMLURL}}/blame/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}">{{.locale.Tr "repo.view_git_blame"}}</a>
-							</div>
-							<div class="ui link list">
-								<a data-clipboard-text="{{.Repository.HTMLURL}}/src/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}" class="item copy-line-permalink">{{.locale.Tr "repo.file_copy_permalink"}}</a>
-							</div>
-						</div>
-					</div>
 				</div>
 				{{end}}
 			{{end}}

templates/user/settings/applications.tmpl

@@ -19,7 +19,7 @@
 									{{$.locale.Tr "settings.delete_token"}}
 								</button>
 						</div>
-						<i class="big send icon {{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-content="{{$.locale.Tr "settings.token_state_desc"}}" data-variation="inverted tiny"{{end}}></i>
+						<i class="big send icon tooltip{{if .HasRecentActivity}} green{{end}}" {{if .HasRecentActivity}}data-content="{{$.locale.Tr "settings.token_state_desc"}}"{{end}}></i>
 						<div class="content">
 							<strong>{{.Name}}</strong>
 							<div class="activity meta">

templates/user/settings/keys_principal.tmpl

@@ -21,7 +21,7 @@
 							{{$.locale.Tr "settings.delete_key"}}
 						</button>
 					</div>
-					<i class="big send icon {{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-content="{{$.locale.Tr "settings.principal_state_desc"}}" data-variation="inverted tiny"{{end}}></i>
+					<i class="big send icon tooltip{{if .HasRecentActivity}} green{{end}}" {{if .HasRecentActivity}}data-content="{{$.locale.Tr "settings.principal_state_desc"}}"{{end}}></i>
 					<div class="content">
 						<strong>{{.Name}}</strong>
 						<div class="activity meta">

templates/user/settings/keys_ssh.tmpl

@@ -47,7 +47,7 @@
 
 				</div>
 				<div class="left floated content">
-					<span class="{{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-content="{{$.locale.Tr "settings.key_state_desc"}}" data-variation="inverted tiny"{{end}}>{{svg "octicon-key" 32}}</span>
+					<span class="tooltip{{if .HasRecentActivity}} green{{end}}" {{if .HasRecentActivity}}data-content="{{$.locale.Tr "settings.key_state_desc"}}"{{end}}>{{svg "octicon-key" 32}}</span>
 				</div>
 				<div class="content">
 						{{if .Verified}}

web_src/fomantic/build/semantic.css

@@ -34446,427 +34446,6 @@ Floated Menu / Item
 /*******************************
          Site Overrides
 *******************************/
-/*!
- * # Fomantic-UI - Popup
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
-            Popup
-*******************************/
-
-.ui.popup {
-  display: none;
-  position: absolute;
-  top: 0;
-  right: 0;
-  /* Fixes content being squished when inline (moz only) */
-  min-width: -webkit-min-content;
-  min-width: -moz-min-content;
-  min-width: min-content;
-  z-index: 1900;
-  border: 1px solid #D4D4D5;
-  line-height: 1.4285em;
-  max-width: 250px;
-  background: #FFFFFF;
-  padding: 0.833em 1em;
-  font-weight: normal;
-  font-style: normal;
-  color: rgba(0, 0, 0, 0.87);
-  border-radius: 0.28571429rem;
-  box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
-}
-
-.ui.popup > .header {
-  padding: 0;
-  font-family: var(--fonts-regular);
-  font-size: 1.14285714em;
-  line-height: 1.2;
-  font-weight: 500;
-}
-
-.ui.popup > .header + .content {
-  padding-top: 0.5em;
-}
-
-.ui.popup:before {
-  position: absolute;
-  content: '';
-  width: 0.71428571em;
-  height: 0.71428571em;
-  background: #FFFFFF;
-  transform: rotate(45deg);
-  z-index: 1901;
-  box-shadow: 1px 1px 0 0 #bababc;
-}
-
-/*******************************
-            Types
-*******************************/
-
-/*--------------
-     Spacing
----------------*/
-
-.ui.popup {
-  margin: 0;
-}
-
-/* Extending from Top */
-
-.ui.top.popup {
-  margin: 0 0 0.71428571em;
-}
-
-.ui.top.left.popup {
-  transform-origin: left bottom;
-}
-
-.ui.top.center.popup {
-  transform-origin: center bottom;
-}
-
-.ui.top.right.popup {
-  transform-origin: right bottom;
-}
-
-/* Extending from Vertical Center */
-
-.ui.left.center.popup {
-  margin: 0 0.71428571em 0 0;
-  transform-origin: right 50%;
-}
-
-.ui.right.center.popup {
-  margin: 0 0 0 0.71428571em;
-  transform-origin: left 50%;
-}
-
-/* Extending from Bottom */
-
-.ui.bottom.popup {
-  margin: 0.71428571em 0 0;
-}
-
-.ui.bottom.left.popup {
-  transform-origin: left top;
-}
-
-.ui.bottom.center.popup {
-  transform-origin: center top;
-}
-
-.ui.bottom.right.popup {
-  transform-origin: right top;
-}
-
-/*--------------
-       Pointer
-  ---------------*/
-
-/*--- Below ---*/
-
-.ui.bottom.center.popup:before {
-  margin-left: -0.30714286em;
-  top: -0.30714286em;
-  left: 50%;
-  right: auto;
-  bottom: auto;
-  box-shadow: -1px -1px 0 0 #bababc;
-}
-
-.ui.bottom.left.popup {
-  margin-left: 0;
-}
-
-/*rtl:rename*/
-
-.ui.bottom.left.popup:before {
-  top: -0.30714286em;
-  left: 1em;
-  right: auto;
-  bottom: auto;
-  margin-left: 0;
-  box-shadow: -1px -1px 0 0 #bababc;
-}
-
-.ui.bottom.right.popup {
-  margin-right: 0;
-}
-
-/*rtl:rename*/
-
-.ui.bottom.right.popup:before {
-  top: -0.30714286em;
-  right: 1em;
-  bottom: auto;
-  left: auto;
-  margin-left: 0;
-  box-shadow: -1px -1px 0 0 #bababc;
-}
-
-/*--- Above ---*/
-
-.ui.top.center.popup:before {
-  top: auto;
-  right: auto;
-  bottom: -0.30714286em;
-  left: 50%;
-  margin-left: -0.30714286em;
-}
-
-.ui.top.left.popup {
-  margin-left: 0;
-}
-
-/*rtl:rename*/
-
-.ui.top.left.popup:before {
-  bottom: -0.30714286em;
-  left: 1em;
-  top: auto;
-  right: auto;
-  margin-left: 0;
-}
-
-.ui.top.right.popup {
-  margin-right: 0;
-}
-
-/*rtl:rename*/
-
-.ui.top.right.popup:before {
-  bottom: -0.30714286em;
-  right: 1em;
-  top: auto;
-  left: auto;
-  margin-left: 0;
-}
-
-/*--- Left Center ---*/
-
-/*rtl:rename*/
-
-.ui.left.center.popup:before {
-  top: 50%;
-  right: -0.30714286em;
-  bottom: auto;
-  left: auto;
-  margin-top: -0.30714286em;
-  box-shadow: 1px -1px 0 0 #bababc;
-}
-
-/*--- Right Center  ---*/
-
-/*rtl:rename*/
-
-.ui.right.center.popup:before {
-  top: 50%;
-  left: -0.30714286em;
-  bottom: auto;
-  right: auto;
-  margin-top: -0.30714286em;
-  box-shadow: -1px 1px 0 0 #bababc;
-}
-
-.ui.right.center.popup:before,
-.ui.left.center.popup:before {
-  background: #FFFFFF;
-}
-
-/* Arrow Color By Location */
-
-.ui.bottom.popup:before {
-  background: #FFFFFF;
-}
-
-.ui.top.popup:before {
-  background: #FFFFFF;
-}
-
-/* Inverted Arrow Color */
-
-.ui.inverted.bottom.popup:before {
-  background: #1B1C1D;
-}
-
-.ui.inverted.right.center.popup:before,
-.ui.inverted.left.center.popup:before {
-  background: #1B1C1D;
-}
-
-.ui.inverted.top.popup:before {
-  background: #1B1C1D;
-}
-
-/*******************************
-            Coupling
-*******************************/
-
-/* Immediate Nested Grid */
-
-.ui.popup > .ui.grid:not(.padded) {
-  width: calc(100% + 1.75rem);
-  margin: -0.7rem -0.875rem;
-}
-
-/*******************************
-            States
-*******************************/
-
-.ui.loading.popup {
-  display: block;
-  visibility: hidden;
-  z-index: -1;
-}
-
-.ui.animating.popup,
-.ui.visible.popup {
-  display: block;
-}
-
-.ui.visible.popup {
-  transform: translateZ(0);
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-}
-
-/*******************************
-            Variations
-*******************************/
-
-/*--------------
-       Basic
-  ---------------*/
-
-.ui.basic.popup:before {
-  display: none;
-}
-
-.ui.fixed.popup {
-  width: 250px;
-}
-
-/*--------------
-       Wide
-  ---------------*/
-
-.ui.wide.popup {
-  max-width: 350px;
-}
-
-.ui.wide.popup.fixed {
-  width: 350px;
-}
-
-.ui[class*="very wide"].popup {
-  max-width: 550px;
-}
-
-.ui[class*="very wide"].popup.fixed {
-  width: 550px;
-}
-
-@media only screen and (max-width: 767.98px) {
-  .ui.wide.popup,
-  .ui[class*="very wide"].popup {
-    max-width: 250px;
-  }
-
-  .ui.wide.popup.fixed,
-  .ui[class*="very wide"].popup.fixed {
-    width: 250px;
-  }
-}
-
-/*--------------
-       Fluid
-  ---------------*/
-
-.ui.fluid.popup {
-  width: 100%;
-  max-width: none;
-}
-
-/*--------------
-       Colors
-  ---------------*/
-
-/* Inverted colors  */
-
-.ui.inverted.popup {
-  background: #1B1C1D;
-  color: #FFFFFF;
-  border: none;
-  box-shadow: none;
-}
-
-.ui.inverted.popup .header {
-  background-color: none;
-  color: #FFFFFF;
-}
-
-.ui.inverted.popup:before {
-  background-color: #1B1C1D;
-  box-shadow: none !important;
-}
-
-/*--------------
-       Flowing
-  ---------------*/
-
-.ui.flowing.popup {
-  max-width: none;
-}
-
-/*--------------
-     Sizes
----------------*/
-
-.ui.popup {
-  font-size: 1rem;
-}
-
-.ui.mini.popup {
-  font-size: 0.78571429rem;
-}
-
-.ui.tiny.popup {
-  font-size: 0.85714286rem;
-}
-
-.ui.small.popup {
-  font-size: 0.92857143rem;
-}
-
-.ui.large.popup {
-  font-size: 1.14285714rem;
-}
-
-.ui.big.popup {
-  font-size: 1.28571429rem;
-}
-
-.ui.huge.popup {
-  font-size: 1.42857143rem;
-}
-
-.ui.massive.popup {
-  font-size: 1.71428571rem;
-}
-
-/*******************************
-         Theme Overrides
-*******************************/
-
-/*******************************
-        User Overrides
-*******************************/
 /*!
  * # Fomantic-UI - Reset
  * http://github.com/fomantic/Fomantic-UI/

web_src/fomantic/semantic.json

@@ -44,7 +44,6 @@
     "menu",
     "message",
     "modal",
-    "popup",
     "reset",
     "search",
     "segment",

web_src/js/components/DashboardRepoList.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import $ from 'jquery';
 import {initVueSvg, vueDelimiters} from './VueComponentLoader.js';
+import {initTooltip} from '../modules/tippy.js';
 
 const {appSubUrl, assetUrlPrefix, pageData} = window.config;
 
@@ -138,7 +139,9 @@ function initVueComponents() {
 
     mounted() {
       this.changeReposFilter(this.reposFilter);
-      $(this.$el).find('.tooltip').popup();
+      for (const el of this.$el.querySelectorAll('.tooltip')) {
+        initTooltip(el);
+      }
       $(this.$el).find('.dropdown').dropdown();
       this.setCheckboxes();
       Vue.nextTick(() => {

web_src/js/features/clipboard.js

@@ -1,24 +1,15 @@
-import $ from 'jquery';
+import {showTemporaryTooltip} from '../modules/tippy.js';
 
 const {copy_success, copy_error} = window.config.i18n;
 
-function onSuccess(btn) {
+export async function copyToClipboard(text) {
-  btn.setAttribute('data-variation', 'inverted tiny');
+  try {
-  $(btn).popup('destroy');
+    await navigator.clipboard.writeText(text);
-  const oldContent = btn.getAttribute('data-content');
+  } catch {
-  btn.setAttribute('data-content', copy_success);
+    return fallbackCopyToClipboard(text);
-  $(btn).popup('show');
+  }
-  btn.setAttribute('data-content', oldContent || '');
+  return true;
 }
-function onError(btn) {
-  btn.setAttribute('data-variation', 'inverted tiny');
-  const oldContent = btn.getAttribute('data-content');
-  $(btn).popup('destroy');
-  btn.setAttribute('data-content', copy_error);
-  $(btn).popup('show');
-  btn.setAttribute('data-content', oldContent || '');
-}
-
 
 // Fallback to use if navigator.clipboard doesn't exist. Achieved via creating
 // a temporary textarea element, selecting the text, and using document.execCommand
@@ -60,16 +51,8 @@ export default function initGlobalCopyToClipboardListener() {
         e.preventDefault();
 
         (async() => {
-          try {
+          const success = await copyToClipboard(text);
-            await navigator.clipboard.writeText(text);
+          showTemporaryTooltip(target, success ? copy_success : copy_error);
-            onSuccess(target);
-          } catch {
-            if (fallbackCopyToClipboard(text)) {
-              onSuccess(target);
-            } else {
-              onError(target);
-            }
-          }
         })();
 
         break;

web_src/js/features/common-global.js

@@ -6,6 +6,7 @@ import {initCompColorPicker} from './comp/ColorPicker.js';
 import {showGlobalErrorMessage} from '../bootstrap.js';
 import {attachDropdownAria} from './aria.js';
 import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.js';
+import {initTooltip} from '../modules/tippy.js';
 
 const {appUrl, csrfToken} = window.config;
 
@@ -62,18 +63,10 @@ export function initGlobalButtonClickOnEnter() {
   });
 }
 
-export function initPopup(target) {
+export function initGlobalTooltips() {
-  const $el = $(target);
+  for (const el of document.getElementsByClassName('tooltip')) {
-  const attr = $el.attr('data-variation');
+    initTooltip(el);
-  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() {
@@ -106,7 +99,12 @@ export function initGlobalCommon() {
   $uiDropdowns.filter('.jump').dropdown({
     action: 'hide',
     onShow() {
-      $('.tooltip').popup('hide');
+      // hide associated tooltip while dropdown is open
+      this._tippy?.hide();
+      this._tippy?.disable();
+    },
+    onHide() {
+      this._tippy?.enable();
     },
     fullTextSearch: 'exact'
   });
@@ -122,13 +120,6 @@ export function initGlobalCommon() {
 
   $('.ui.checkbox').checkbox();
 
-  $('.top.menu .tooltip').popup({
-    onShow() {
-      if ($('.top.menu .menu.transition').hasClass('visible')) {
-        return false;
-      }
-    }
-  });
   $('.tabular.menu .item').tab();
   $('.tabable.menu .item').tab();
 

web_src/js/features/comp/ReactionSelector.js

@@ -1,16 +1,20 @@
 import $ from 'jquery';
+import {createTippy} from '../../modules/tippy.js';
+
 const {csrfToken} = window.config;
 
 export function initCompReactionSelector(parent) {
-  let reactions = '';
+  let selector = 'a.label';
   if (!parent) {
     parent = $(document);
-    reactions = '.reactions > ';
+    selector = `.reactions ${selector}`;
   }
 
-  parent.find(`${reactions}a.label`).popup({position: 'bottom left', metadata: {content: 'title', title: 'none'}});
+  for (const el of parent[0].querySelectorAll(selector)) {
+    createTippy(el, {placement: 'bottom-start', content: el.getAttribute('data-title')});
+  }
 
-  parent.find(`.select-reaction > .menu > .item, ${reactions}a.label`).on('click', function (e) {
+  parent.find(`.select-reaction > .menu > .item, ${selector}`).on('click', function (e) {
     e.preventDefault();
 
     if ($(this).hasClass('disabled')) return;

web_src/js/features/repo-code.js

@@ -1,6 +1,8 @@
 import $ from 'jquery';
 import {svg} from '../svg.js';
 import {invertFileFolding} from './file-fold.js';
+import {createTippy} from '../modules/tippy.js';
+import {copyToClipboard} from './clipboard.js';
 
 function changeHash(hash) {
   if (window.history.pushState) {
@@ -39,13 +41,13 @@ function selectRange($list, $select, $from) {
     $viewGitBlame.attr('href', href);
   };
 
-  const updateCopyPermalinkHref = function(anchor) {
+  const updateCopyPermalinkUrl = function(anchor) {
     if ($copyPermalink.length === 0) {
       return;
     }
-    let link = $copyPermalink.attr('data-clipboard-text');
+    let link = $copyPermalink.attr('data-url');
     link = `${link.replace(/#L\d+$|#L\d+-L\d+$/, '')}#${anchor}`;
-    $copyPermalink.attr('data-clipboard-text', link);
+    $copyPermalink.attr('data-url', link);
   };
 
   if ($from) {
@@ -67,7 +69,7 @@ function selectRange($list, $select, $from) {
 
       updateIssueHref(`L${a}-L${b}`);
       updateViewGitBlameFragment(`L${a}-L${b}`);
-      updateCopyPermalinkHref(`L${a}-L${b}`);
+      updateCopyPermalinkUrl(`L${a}-L${b}`);
       return;
     }
   }
@@ -76,17 +78,36 @@ function selectRange($list, $select, $from) {
 
   updateIssueHref($select.attr('rel'));
   updateViewGitBlameFragment($select.attr('rel'));
-  updateCopyPermalinkHref($select.attr('rel'));
+  updateCopyPermalinkUrl($select.attr('rel'));
 }
 
 function showLineButton() {
-  if ($('.code-line-menu').length === 0) return;
+  const menu = document.querySelector('.code-line-menu');
-  $('.code-line-button').remove();
+  if (!menu) return;
-  $('.code-view td.lines-code.active').closest('tr').find('td:eq(0)').first().prepend(
+
-    $(`<button class="code-line-button">${svg('octicon-kebab-horizontal')}</button>`)
+  // remove all other line buttons
-  );
+  for (const el of document.querySelectorAll('.code-line-button')) {
-  $('.code-line-menu').appendTo($('.code-view'));
+    el.remove();
-  $('.code-line-button').popup({popup: $('.code-line-menu'), on: 'click'});
+  }
+
+  // find active row and add button
+  const tr = document.querySelector('.code-view td.lines-code.active').closest('tr');
+  const td = tr.querySelector('td');
+  const btn = document.createElement('button');
+  btn.classList.add('code-line-button');
+  btn.innerHTML = svg('octicon-kebab-horizontal');
+  td.prepend(btn);
+
+  // put a copy of the menu back into DOM for the next click
+  btn.closest('.code-view').appendChild(menu.cloneNode(true));
+
+  createTippy(btn, {
+    trigger: 'click',
+    content: menu,
+    placement: 'right-start',
+    role: 'menu',
+    interactive: 'true',
+  });
 }
 
 export function initRepoCodeView() {
@@ -159,4 +180,9 @@ export function initRepoCodeView() {
     const blob = await $.get(`${url}?${query}&anchor=${anchor}`);
     currentTarget.closest('tr').outerHTML = blob;
   });
+  $(document).on('click', '.copy-line-permalink', async (e) => {
+    const success = await copyToClipboard(e.currentTarget.getAttribute('data-url'));
+    if (!success) return;
+    document.querySelector('.code-line-button')?._tippy?.hide();
+  });
 }

web_src/js/features/repo-commit.js

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import {createTippy} from '../modules/tippy.js';
 
 const {csrfToken} = window.config;
 
@@ -58,12 +59,12 @@ export function initRepoCommitLastCommitLoader() {
 export function initCommitStatuses() {
   $('.commit-statuses-trigger').each(function () {
     const positionRight = $('.repository.file.list').length > 0 || $('.repository.diff').length > 0;
-    const popupPosition = positionRight ? 'right center' : 'left center';
+
-    $(this)
+    createTippy(this, {
-      .popup({
+      trigger: 'click',
-        on: 'click',
+      content: this.nextSibling,
-        lastResort: popupPosition, // prevent error message "Popup does not fit within the boundaries of the viewport"
+      placement: positionRight ? 'right' : 'left',
-        position: popupPosition,
+      interactive: true,
-      });
+    });
   });
 }

web_src/js/features/repo-diff.js

@@ -3,7 +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';
+import {initTooltip} from '../modules/tippy.js';
 
 const {csrfToken} = window.config;
 
@@ -53,7 +53,7 @@ export function initRepoDiffConversationForm() {
     const newConversationHolder = $(await $.post(form.attr('action'), form.serialize()));
     const {path, side, idx} = newConversationHolder.data();
 
-    initPopup(newConversationHolder.find('.tooltip'));
+    initTooltip(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/features/repo-issue.js

@@ -4,6 +4,7 @@ import attachTribute from './tribute.js';
 import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/EasyMDE.js';
 import {initEasyMDEImagePaste} from './comp/ImagePaste.js';
 import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
+import {initTooltip, showTemporaryTooltip} from '../modules/tippy.js';
 
 const {appSubUrl, csrfToken} = window.config;
 
@@ -278,7 +279,8 @@ export function initRepoPullRequestAllowMaintainerEdit() {
 
   const promptTip = $checkbox.attr('data-prompt-tip');
   const promptError = $checkbox.attr('data-prompt-error');
-  $checkbox.popup({content: promptTip});
+
+  initTooltip($checkbox[0], {content: promptTip});
   $checkbox.checkbox({
     'onChange': () => {
       const checked = $checkbox.checkbox('is checked');
@@ -288,14 +290,7 @@ export function initRepoPullRequestAllowMaintainerEdit() {
       $.ajax({url, type: 'POST',
         data: {_csrf: csrfToken, allow_maintainer_edit: checked},
         error: () => {
-          $checkbox.popup({
+          showTemporaryTooltip($checkbox[0], promptError);
-            content: promptError,
-            onHidden: () => {
-              // the error popup should be shown only once, then we restore the popup to the default message
-              $checkbox.popup({content: promptTip});
-            },
-          });
-          $checkbox.popup('show');
         },
         complete: () => {
           $checkbox.checkbox('set enabled');

web_src/js/features/stopwatch.js

@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import prettyMilliseconds from 'pretty-ms';
+import {createTippy} from '../modules/tippy.js';
 
 const {appSubUrl, csrfToken, notificationSettings, enableTimeTracking} = window.config;
 
@@ -8,21 +9,21 @@ export function initStopwatch() {
     return;
   }
 
-  const stopwatchEl = $('.active-stopwatch-trigger');
+  const stopwatchEl = document.querySelector('.active-stopwatch-trigger');
+  const stopwatchPopup = document.querySelector('.active-stopwatch-popup');
 
-  if (!stopwatchEl.length) {
+  if (!stopwatchEl || !stopwatchPopup) {
     return;
   }
 
-  stopwatchEl.removeAttr('href'); // intended for noscript mode only
+  stopwatchEl.removeAttribute('href'); // intended for noscript mode only
-  stopwatchEl.popup({
-    position: 'bottom right',
-    hoverable: true,
-  });
 
-  // form handlers
+  createTippy(stopwatchEl, {
-  $('form > button', stopwatchEl).on('click', function () {
+    content: stopwatchPopup,
-    $(this).parent().trigger('submit');
+    placement: 'bottom-end',
+    trigger: 'click',
+    maxWidth: 'none',
+    interactive: true,
   });
 
   // global stop watch (in the head_navbar), it should always work in any case either the EventSource or the PeriodicPoller is used.

web_src/js/index.js

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

web_src/js/modules/tippy.js

@@ -1,12 +1,56 @@
 import tippy from 'tippy.js';
 
-export function createTippy(target, opts) {
+export function createTippy(target, opts = {}) {
-  return tippy(target, {
+  const instance = tippy(target, {
     appendTo: document.body,
     placement: 'top-start',
     animation: false,
     allowHTML: true,
+    maxWidth: 500, // increase over default 350px
     arrow: `<svg width="16" height="7"><path d="m0 7 8-7 8 7Z" class="tippy-svg-arrow-outer"/><path d="m0 8 8-7 8 7Z" class="tippy-svg-arrow-inner"/></svg>`,
+    ...(opts?.role && {theme: opts.role}),
     ...opts,
   });
+
+  // for popups where content refers to a DOM element, we use the 'hide' class to initially hide
+  // the content, now we can remove it as the content has been removed from the DOM by tippy
+  if (opts.content instanceof Element) {
+    opts.content.classList.remove('hide');
+  }
+
+  return instance;
+}
+
+export function initTooltip(el, props = {}) {
+  const content = el.getAttribute('data-content') || props.content;
+  if (!content) return null;
+  return createTippy(el, {
+    content,
+    delay: 100,
+    role: 'tooltip',
+    ...props,
+  });
+}
+
+export function showTemporaryTooltip(target, content) {
+  let tippy, oldContent;
+  if (target._tippy) {
+    tippy = target._tippy;
+    oldContent = tippy.props.content;
+  } else {
+    tippy = initTooltip(target, {content});
+  }
+
+  tippy.setContent(content);
+  tippy.show();
+  tippy.setProps({
+    onHidden: (tippy) => {
+      if (oldContent) {
+        tippy.setContent(oldContent);
+      } else {
+        tippy.destroy();
+      }
+      tippy.setProps({onHidden: undefined});
+    },
+  });
 }

web_src/less/_base.less

@@ -155,6 +155,8 @@
   --color-caret: var(--color-text-dark);
   --color-reaction-bg: #0000000a;
   --color-reaction-active-bg: var(--color-primary-alpha-20);
+  --color-tooltip-bg: #000000f0;
+  --color-tooltip-text: #ffffff;
   /* backgrounds */
   --checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
   --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
@@ -1313,7 +1315,7 @@ footer {
 }
 
 .hide {
-  display: none;
+  display: none !important;
 
   &.show-outdated {
     display: none !important;
@@ -1873,41 +1875,6 @@ a.ui.basic.label:hover {
   color: #f05133; /* from https://upload.wikimedia.org/wikipedia/commons/e/e0/Git-logo.svg */
 }
 
-.ui.popup {
-  background-color: var(--color-body);
-  color: var(--color-secondary-dark-6);
-  border-color: var(--color-secondary);
-}
-
-.ui.popup::before {
-  box-shadow: 1px 1px 0 0 var(--color-secondary);
-}
-
-.ui.bottom.popup::before,
-.ui.top.popup::before,
-.ui.right.center.popup::before,
-.ui.left.center.popup::before {
-  background-color: var(--color-body);
-}
-
-.ui.bottom.left.popup::before,
-.ui.bottom.right.popup::before,
-.ui.bottom.center.popup::before {
-  box-shadow: -1px -1px 0 0 var(--color-secondary);
-}
-
-.ui.left.center.popup::before {
-  box-shadow: 1px -1px 0 0 var(--color-secondary);
-}
-
-.ui.right.center.popup::before {
-  box-shadow: -1px 1px 0 0 var(--color-secondary);
-}
-
-.ui.popup .ui.label {
-  margin-bottom: .4em;
-}
-
 .color-icon {
   display: inline-block;
   border-radius: 100%;

web_src/less/modules/tippy.less

@@ -1,9 +1,5 @@
 /* styles are based on node_modules/tippy.js/dist/tippy.css */
 
-.tippy-box[data-animation="fade"][data-state="hidden"] {
-  opacity: 0;
-}
-
 [data-tippy-root] {
   max-width: calc(100vw - 10px);
 }
@@ -15,7 +11,21 @@
   border: 1px solid var(--color-secondary);
   border-radius: var(--border-radius);
   font-size: 1rem;
-  transition-property: transform, visibility, opacity;
+}
+
+.tippy-box[data-theme="tooltip"] {
+  background-color: var(--color-tooltip-bg);
+  color: var(--color-tooltip-text);
+  border: none;
+}
+
+.tippy-box[data-theme="menu"] {
+  background-color: none;
+  color: var(--color-tooltip-text);
+}
+
+.tippy-box[data-theme="menu"] .ui.menu {
+  border: none;
 }
 
 .tippy-content {
@@ -24,6 +34,14 @@
   z-index: 1;
 }
 
+.tippy-box[data-theme="tooltip"] .tippy-content {
+  padding: .5rem 1rem;
+}
+
+.tippy-box[data-theme="menu"] .tippy-content {
+  padding: 0;
+}
+
 .tippy-box[data-placement^="top"] > .tippy-svg-arrow {
   bottom: 0;
 }
@@ -82,3 +100,12 @@
 .tippy-svg-arrow-inner {
   fill: var(--color-body);
 }
+
+.tippy-box[data-theme="tooltip"] .tippy-svg-arrow-inner,
+.tippy-box[data-theme="tooltip"] .tippy-svg-arrow-outer {
+  fill: var(--color-tooltip-bg);
+}
+
+.tippy-box[data-theme="menu"] .tippy-svg-arrow-inner {
+  fill: var(--color-menu);
+}