mirror of
				https://github.com/go-gitea/gitea.git
				synced 2025-11-04 01:34:27 +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