From 48e3aec86228ec4617419c354b565708d5db341c Mon Sep 17 00:00:00 2001
From: Giteabot <teabot@gitea.io>
Date: Sun, 22 Oct 2023 21:35:58 +0800
Subject: [PATCH] Enable followCursor for language stats bar (#27713) (#27739)

Backport #27713 by @silverwind

Fixes: https://github.com/go-gitea/gitea/issues/27600


![](https://github.com/go-gitea/gitea/assets/115237/96743d90-0712-4f13-84ec-66f84e6ed2d7)

Also tested together with https://github.com/go-gitea/gitea/pull/27704,
works well.

Co-authored-by: silverwind <me@silverwind.io>
---
 templates/repo/sub_menu.tmpl | 2 +-
 web_src/js/modules/tippy.js  | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/templates/repo/sub_menu.tmpl b/templates/repo/sub_menu.tmpl
index 56c94f1b6..8edb0c151 100644
--- a/templates/repo/sub_menu.tmpl
+++ b/templates/repo/sub_menu.tmpl
@@ -38,7 +38,7 @@
 	</div>
 	<a class="ui segment language-stats show-panel toggle" data-panel=".repository-summary > .sub-menu">
 		{{range .LanguageStats}}
-		<div class="bar" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-tooltip-placement="top" data-tooltip-content={{.Language}}></div>
+		<div class="bar" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-tooltip-placement="top" data-tooltip-content={{.Language}} data-tooltip-follow-cursor="horizontal"></div>
 		{{end}}
 	</a>
 	{{end}}
diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js
index 4eed0aa4b..ec7ee2141 100644
--- a/web_src/js/modules/tippy.js
+++ b/web_src/js/modules/tippy.js
@@ -1,4 +1,4 @@
-import tippy from 'tippy.js';
+import tippy, {followCursor} from 'tippy.js';
 
 const visibleInstances = new Set();
 
@@ -35,6 +35,7 @@ export function createTippy(target, opts = {}) {
     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>`,
     role: 'menu', // HTML role attribute, only tooltips should use "tooltip"
     theme: other.role || 'menu', // CSS theme, we support either "tooltip" or "menu"
+    plugins: [followCursor],
     ...other,
   });
 
@@ -78,6 +79,7 @@ function attachTooltip(target, content = null) {
     theme: 'tooltip',
     hideOnClick,
     placement: target.getAttribute('data-tooltip-placement') || 'top-start',
+    followCursor: target.getAttribute('data-tooltip-follow-cursor') || false,
     ...(target.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true, aria: {content: 'describedby', expanded: false}} : {}),
   };