From 48850365b5ad8d76d8943c99ce142dee89c57626 Mon Sep 17 00:00:00 2001
From: JakobDev <jakobdev@gmx.de>
Date: Tue, 23 Aug 2022 11:26:58 +0200
Subject: [PATCH 1/2] Show language name on hover

---
 templates/repo/sub_menu.tmpl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/repo/sub_menu.tmpl b/templates/repo/sub_menu.tmpl
index 276bf05a4f795..cbe52386d6276 100644
--- a/templates/repo/sub_menu.tmpl
+++ b/templates/repo/sub_menu.tmpl
@@ -39,7 +39,7 @@
 	</div>
 	<a class="ui segment language-stats">
 		{{range .LanguageStats}}
-		<div class="bar" style="width: {{ .Percentage }}%; background-color: {{ .Color }}">&nbsp;</div>
+		<div class="bar" style="width: {{ .Percentage }}%; background-color: {{ .Color }}" title={{ .Language }}>&nbsp;</div>
 		{{end}}
 	</a>
 	{{end}}

From f7875a8bddb4fac2c6ae999ac48e77776d8d2374 Mon Sep 17 00:00:00 2001
From: JakobDev <jakobdev@gmx.de>
Date: Wed, 24 Aug 2022 08:13:50 +0200
Subject: [PATCH 2/2] Use tippy

---
 templates/repo/sub_menu.tmpl | 2 +-
 web_src/js/modules/tippy.js  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/repo/sub_menu.tmpl b/templates/repo/sub_menu.tmpl
index cbe52386d6276..ac2b51c81baf1 100644
--- a/templates/repo/sub_menu.tmpl
+++ b/templates/repo/sub_menu.tmpl
@@ -39,7 +39,7 @@
 	</div>
 	<a class="ui segment language-stats">
 		{{range .LanguageStats}}
-		<div class="bar" style="width: {{ .Percentage }}%; background-color: {{ .Color }}" title={{ .Language }}>&nbsp;</div>
+		<div class="bar tooltip" style="width: {{ .Percentage }}%; background-color: {{ .Color }}" data-placement="top" data-content={{ .Language }}>&nbsp;</div>
 		{{end}}
 	</a>
 	{{end}}
diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js
index 6f3adadddc104..5ab635338397b 100644
--- a/web_src/js/modules/tippy.js
+++ b/web_src/js/modules/tippy.js
@@ -3,7 +3,7 @@ import tippy from 'tippy.js';
 export function createTippy(target, opts = {}) {
   const instance = tippy(target, {
     appendTo: document.body,
-    placement: 'top-start',
+    placement: target.getAttribute('data-placement') || 'top-start',
     animation: false,
     allowHTML: true,
     maxWidth: 500, // increase over default 350px