mirror of
				https://github.com/go-gitea/gitea.git
				synced 2025-10-26 12:27:06 +00:00 
			
		
		
		
	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.
This commit is contained in:
		| @@ -39,7 +39,7 @@ | |||||||
| 	</div> | 	</div> | ||||||
| 	<a class="ui segment language-stats"> | 	<a class="ui segment language-stats"> | ||||||
| 		{{range .LanguageStats}} | 		{{range .LanguageStats}} | ||||||
| 		<div class="bar" style="width: {{.Percentage}}%; background-color: {{.Color}}"> </div> | 		<div class="bar tooltip" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-placement="top" data-content={{ .Language }}> </div> | ||||||
| 		{{end}} | 		{{end}} | ||||||
| 	</a> | 	</a> | ||||||
| 	{{end}} | 	{{end}} | ||||||
|   | |||||||
| @@ -3,7 +3,7 @@ import tippy from 'tippy.js'; | |||||||
| export function createTippy(target, opts = {}) { | export function createTippy(target, opts = {}) { | ||||||
|   const instance = tippy(target, { |   const instance = tippy(target, { | ||||||
|     appendTo: document.body, |     appendTo: document.body, | ||||||
|     placement: 'top-start', |     placement: target.getAttribute('data-placement') || 'top-start', | ||||||
|     animation: false, |     animation: false, | ||||||
|     allowHTML: false, |     allowHTML: false, | ||||||
|     maxWidth: 500, // increase over default 350px |     maxWidth: 500, // increase over default 350px | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user
	 JakobDev
					JakobDev