bootstrap-tooltip-extra-positions.scss

//== Some Bootstrap variables for Tooltips
//
//##

//** Tooltip background color
$tooltip-bg:                  #000;

//** Tooltip arrow width
$tooltip-arrow-width:         5px;
//** Tooltip arrow color
$tooltip-arrow-color:         $tooltip-bg;


//== Styles for Tooltip Extra Positions
//
//##

// Base class
.tooltip {
  
  // top-left + top-right    
  &.top-l,
  &.top-r {
     margin-top: -3px;
     padding: $tooltip-arrow-width 0; 
  }
  
  // bottom-left + bottom-right 
  &.bottom-l,
  &.bottom-r {
    margin-top: 3px;
    padding: $tooltip-arrow-width 0;
  }
  
}

// Arrows
.tooltip {
  
  // top-left + top-right arrows
  &.top-l .tooltip-arrow,
  &.top-r .tooltip-arrow {
    bottom: 0;
    border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
    border-top-color: $tooltip-arrow-color;
  }
  
  &.top-l .tooltip-arrow {
    left: $tooltip-arrow-width;
  }
  
  &.top-r .tooltip-arrow {
    right: $tooltip-arrow-width;
  }
  
  // bottom-left + bottom-right arrows
  &.bottom-l .tooltip-arrow,
  &.bottom-r .tooltip-arrow {
    top: 0;
    border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
    border-bottom-color: $tooltip-arrow-color;
  }
  
  &.bottom-l .tooltip-arrow {
    left: $tooltip-arrow-width;
  }
  
  &.bottom-r .tooltip-arrow {
    right: $tooltip-arrow-width;
  }
  
}