Fix tooltip behaviors on click/focus
This commit is contained in:
		
					parent
					
						
							
								38eb5e7c2e
							
						
					
				
			
			
				commit
				
					
						3157cf65ef
					
				
			
		
					 8 changed files with 204 additions and 43 deletions
				
			
		
							
								
								
									
										32
									
								
								src/Tooltip.module.css
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										32
									
								
								src/Tooltip.module.css
									
										
									
									
									
										Normal file
									
								
							| 
						 | 
				
			
			@ -0,0 +1,32 @@
 | 
			
		|||
.tooltip {
 | 
			
		||||
  background-color: var(--bgColor2);
 | 
			
		||||
  position: absolute;
 | 
			
		||||
  flex-direction: row;
 | 
			
		||||
  justify-content: center;
 | 
			
		||||
  align-items: center;
 | 
			
		||||
  padding: 8px 10px;
 | 
			
		||||
  color: var(--textColor1);
 | 
			
		||||
  border-radius: 8px;
 | 
			
		||||
  max-width: 135px;
 | 
			
		||||
  width: max-content;
 | 
			
		||||
  z-index: 1;
 | 
			
		||||
  left: 50%;
 | 
			
		||||
  transform: translateX(-50%);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.tooltip.top {
 | 
			
		||||
  bottom: calc(100% + 6px);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.tooltip.bottom {
 | 
			
		||||
  top: calc(100% + 6px);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.tooltip.bottomLeft {
 | 
			
		||||
  top: calc(100% + 6px);
 | 
			
		||||
  left: -25%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.tooltipContainer {
 | 
			
		||||
  position: relative;
 | 
			
		||||
}
 | 
			
		||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue