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.
go-gitea · Sep 2, 2022 · 96a9e15 · 96a9e15
1 parent b8818a1
commit 96a9e15
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git 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
@@ -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