From 96a9e15dffdd612fa78801bd2a1e3d27fdd17bb1 Mon Sep 17 00:00:00 2001
From: JakobDev <jakobdev@gmx.de>
Date: Sat, 3 Sep 2022 00:06:54 +0200
Subject: [PATCH] Show language name on hover (#20923)

Each repo has a bar which shows the used programming languages. If you want to know, what language is behind a color, you need to click the bar. With this PR, you just need to hover over the color the view the name.
---
 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 cf017caaf..7ba234dcc 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 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 44e97e2a0..7fc273d1c 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: false,
     maxWidth: 500, // increase over default 350px