mirror of https://github.com/twbs/bootstrap.git
				
				
				
			
		
			
				
	
	
		
			72 lines
		
	
	
		
			1.7 KiB
		
	
	
	
		
			Plaintext
		
	
	
	
			
		
		
	
	
			72 lines
		
	
	
		
			1.7 KiB
		
	
	
	
		
			Plaintext
		
	
	
	
//
 | 
						|
// Tooltips
 | 
						|
// --------------------------------------------------
 | 
						|
 | 
						|
 | 
						|
// Base class
 | 
						|
.tooltip {
 | 
						|
  position: absolute;
 | 
						|
  z-index: @zindex-tooltip;
 | 
						|
  display: block;
 | 
						|
  visibility: visible;
 | 
						|
  font-size: 11px;
 | 
						|
  line-height: 1.4;
 | 
						|
  .opacity(0);
 | 
						|
 | 
						|
  &.in     { .opacity(1); }
 | 
						|
  &.top    { margin-top:  -3px; padding: 5px 0; }
 | 
						|
  &.right  { margin-left:  3px; padding: 0 5px; }
 | 
						|
  &.bottom { margin-top:   3px; padding: 5px 0; }
 | 
						|
  &.left   { margin-left: -3px; padding: 0 5px; }
 | 
						|
}
 | 
						|
 | 
						|
// Wrapper for the tooltip content
 | 
						|
.tooltip-inner {
 | 
						|
  max-width: 200px;
 | 
						|
  padding: 3px 8px;
 | 
						|
  color: @tooltip-color;
 | 
						|
  text-align: center;
 | 
						|
  text-decoration: none;
 | 
						|
  background-color: @tooltip-background;
 | 
						|
  border-radius: @border-radius-base;
 | 
						|
}
 | 
						|
 | 
						|
// Arrows
 | 
						|
.tooltip-arrow {
 | 
						|
  position: absolute;
 | 
						|
  width: 0;
 | 
						|
  height: 0;
 | 
						|
  border-color: transparent;
 | 
						|
  border-style: solid;
 | 
						|
}
 | 
						|
.tooltip {
 | 
						|
  &.top .tooltip-arrow {
 | 
						|
    bottom: 0;
 | 
						|
    left: 50%;
 | 
						|
    margin-left: -@tooltip-arrow-width;
 | 
						|
    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
 | 
						|
    border-top-color: @tooltip-arrow-color;
 | 
						|
  }
 | 
						|
  &.right .tooltip-arrow {
 | 
						|
    top: 50%;
 | 
						|
    left: 0;
 | 
						|
    margin-top: -@tooltip-arrow-width;
 | 
						|
    border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
 | 
						|
    border-right-color: @tooltip-arrow-color;
 | 
						|
  }
 | 
						|
  &.left .tooltip-arrow {
 | 
						|
    top: 50%;
 | 
						|
    right: 0;
 | 
						|
    margin-top: -@tooltip-arrow-width;
 | 
						|
    border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
 | 
						|
    border-left-color: @tooltip-arrow-color;
 | 
						|
  }
 | 
						|
  &.bottom .tooltip-arrow {
 | 
						|
    top: 0;
 | 
						|
    left: 50%;
 | 
						|
    margin-left: -@tooltip-arrow-width;
 | 
						|
    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
 | 
						|
    border-bottom-color: @tooltip-arrow-color;
 | 
						|
  }
 | 
						|
}
 |