angular.module('plunker', [])
.controller('MainCtrl', function($scope, $timeout, $position, $window) {
  
  $scope.vm = $scope;
  $scope.placements = [
    'top',
    'top-left',
    'top-right',
    'bottom',
    'bottom-left',
    'bottom-right',
    'left',
    'left-top',
    'left-bottom',
    'right',
    'right-top',
    'right-bottom',
    'left-top-corner',
    'left-bottom-corner',
    'right-top-corner',
    'right-bottom-corner'
  ];
  $scope.selectedPlacement = $scope.placements[0];
  $scope.content = 'Here is some content that can demonstrate the container growing to desired content size.';
  $scope.currentPlacement = '';
  
  $scope.$watch('selectedPlacement', function() {
    var el = $window.document.querySelector('#popoverElement');
    angular.element(el).removeClass($scope.currentPlacement);
    var linkEl = $window.document.querySelector('#popoverButton');
    var positionRel = $position.positionElement(el, linkEl, 'auto ' + $scope.selectedPlacement);
    console.log(positionRel);
    $scope.currentPlacement = positionRel.placement;
    angular.element(el).addClass($scope.currentPlacement);
    var positionBody = $position.positionElement(el, linkEl, 'auto ' + $scope.selectedPlacement, 'body');
    console.log(positionBody);
  });
  
})
.factory('$position', ['$window', function($window) {

    var self = {};
    
    function getNode(element) {
      return element ? (element[0] || element) : element;
    }
    
    self.parents = function(element, until) {
      if (!angular.isElement(element)) {
        return;
      }

      var node = getNode(element);
      var parentElements = [];

      while (node.parentElement && !angular.equals(node.parentElement, until)) {
        parentElements.push(node.parentElement);
        node = node.parentElement;
      }
      return parentElements;
    };
    
    self.offsetParent = function(element) {
      if (!angular.isElement(element)) {
        return;
      }

      var node = getNode(element);
      var offsetParent = node.offsetParent;

      while (offsetParent && getComputedStyle(offsetParent).position === 'static') {
        offsetParent = offsetParent.offsetParent;
      }
      return offsetParent || $window.document.documentElement;
    };

    self.scrollParent = function(element, includeHidden) {
      if (!angular.isElement(element)) {
        return;
      }

      var node = getNode(element);
      var nodeStyle = getComputedStyle(node);
      var overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;
      var parentElements = self.parents(element);
      var scrollParent = parentElements.filter(function(el) {
        var elStyle = getComputedStyle(el);
        if (nodeStyle.position === 'absolute' && elStyle.position === 'static') {
          return false;
        }
        return overflowRegex.test(elStyle.overflow + elStyle.overflowY + elStyle.overflowX);
      });

      return nodeStyle.position === 'fixed' || !scrollParent.length ? (element.ownerDocument || $window.document) : scrollParent[0];
    };
    
    self.size = function(element, margins, padding) {
      if (!angular.isElement(element)) {
        return;
      }
      if (padding !== false) {
        padding = true;
      }

      var node = getNode(element);
      var nodeRect = node.getBoundingClientRect();
      var nodeSize = {
        height: nodeRect.height,
        width: nodeRect.width
      };

      if (!padding || margins) {
        var nodeStyle = getComputedStyle(node);
        if (!padding) {
          nodeSize.height -= parseFloat(nodeStyle.paddingTop) + parseFloat(nodeStyle.paddingBottom);
          nodeSize.width -= parseFloat(nodeStyle.paddingLeft) + parseFloat(nodeStyle.paddingRight);
        }
        if (margins) {
          nodeSize.height += parseFloat(nodeStyle.marginTop) + parseFloat(nodeStyle.marginBottom);
          nodeSize.width += parseFloat(nodeStyle.marginLeft) + parseFloat(nodeStyle.marginRight);
        }
      }

      return nodeSize;
    };
    
    self.position = function(element, parentElement) {
      if (!angular.isElement(element)) {
        return;
      }

      var node = getNode(element);
      var nodeRect;
      var nodeStyle = getComputedStyle(node);
      var parentNode = angular.isElement(parentElement) ? getNode(parentElement) : self.offsetParent(node);
      var parentRect = {
        width: $window.innerWidth,
        height: $window.innerHeight,
        top: 0,
        bottom: 0,
        left: 0,
        right: 0
      };

      if (nodeStyle.position === 'fixed') {
        nodeRect = node.getBoundingClientRect();
      } else {
        nodeRect = self.offset(node, false);
        parentRect = self.offset(parentNode, false);
        var parentStyle = getComputedStyle(parentNode);
        parentRect.top += parseFloat(parentStyle.borderTopWidth);
        parentRect.bottom += parseFloat(parentStyle.borderBottomWidth);
        parentRect.left += parseFloat(parentStyle.borderLeftWidth);
        parentRect.right += parseFloat(parentStyle.borderRightWidth);
      }

      var nodePosition =  {
        width: nodeRect.width,
        height: nodeRect.height,
        top: nodeRect.top - parentRect.top,
        bottom: nodeRect.bottom - parentRect.bottom,
        left: nodeRect.left - parentRect.left,
        right: nodeRect.right - parentRect.right
      };

      return nodePosition;
    };
    
    self.offset = function(element) {
      if (!angular.isElement(element)) {
        return;
      }

      var node = getNode(element);
      var nodeRect = node.getBoundingClientRect();
      var docStyle = getComputedStyle($window.document.documentElement);

      var nodeOffset = {
        width: nodeRect.width,
        height: nodeRect.height,
        top: nodeRect.top + $window.pageYOffset - parseFloat(docStyle.borderTopWidth),
        bottom: $window.innerHeight - parseFloat(docStyle.borderBottomWidth) - nodeRect.bottom,
        left: nodeRect.left + $window.pageXOffset - parseFloat(docStyle.borderLeftWidth),
        right: $window.innerWidth - parseFloat(docStyle.borderRightWidth) - nodeRect.right
      };

      return nodeOffset;
    };
    
    self.positionElement = function(element, linkElement, placement, appendTo) {
      if (!angular.isElement(element)) {
        return;
      }
      if (!angular.isElement(linkElement)) {
        return;
      }

      placement = placement || 'auto bottom-left';

      var node = getNode(element);
      var nodeSize = self.size(node);
      var linkNode = getNode(linkElement);
      var preferredPlacement = placement;
      var autoRegex = /\s?auto?\s?/i;
      var autoPlace = autoRegex.test(placement);
      var calcOffset = appendTo === 'body' ? self.offset(linkNode) : self.position(linkNode);
      var calcPosition = {
        top: 0,
        left: 0,
        placement: ''
      };

      if (autoPlace) {
        placement = placement.replace(autoRegex, '');
      }

      var placements = placement.split('-');

      if (autoPlace) {
        var linkNodeOffset = self.offset(linkNode);

        var scrollParent = self.scrollParent(linkElement);
        if (scrollParent !== $window.document) {
          var scrollParentOffset = self.offset(scrollParent);
          linkNodeOffset.top -= scrollParentOffset.top;
          linkNodeOffset.bottom -= scrollParentOffset.bottom;
          linkNodeOffset.left -= scrollParentOffset.left;
          linkNodeOffset.right -= scrollParentOffset.right;
        }

        switch (placements[0]) {
          case 'top':
            if (nodeSize.height > linkNodeOffset.top && nodeSize.height <= linkNodeOffset.bottom) {
              placements[0] = 'bottom';
              placement = placement.replace('top', 'bottom');
            }
            break;
          case 'bottom':
            if (nodeSize.height > linkNodeOffset.bottom && nodeSize.height <= linkNodeOffset.top) {
              placements[0] = 'top';
              placement = placement.replace('bottom', 'top');
            }
            break;
          case 'left':
            if (nodeSize.width > linkNodeOffset.left && nodeSize.width <= linkNodeOffset.right) {
              placements[0] = 'right';
              placement = placement.replace('left', 'right');
            }
            break;
          case 'right':
            if (nodeSize.width > linkNodeOffset.right && nodeSize.width <= linkNodeOffset.left) {
              placements[0] = 'left';
              placement = placement.replace('right', 'left');
            }
            break;
        }

        if (!placements[1]) {
          if (/(top|bottom)/.test(placements[0])) {
            if (linkNodeOffset.left + ((linkNodeOffset.width - nodeSize.width) / 2) < 0) {
              placements[1] = 'left';
            } else if (linkNodeOffset.left + ((linkNodeOffset.width - nodeSize.width) / 2) + nodeSize.width > $window.innerWidth) {
              placements[1] = 'right';
            }
          } else if (/(left|right)/.test(placements[0])) {
            if (linkNodeOffset.top + ((linkNodeOffset.height - nodeSize.height) / 2) < 0) {
              placements[1] = 'top';
            } else if (linkNodeOffset.top + ((linkNodeOffset.height - nodeSize.height) / 2) + nodeSize.height > $window.innerHeight) {
              placements[1] = 'bottom';
            }
          }
        } else {
          switch (placements[1]) {
            case 'top':
              if (nodeSize.height - linkNodeOffset.height > linkNodeOffset.bottom && nodeSize.height - linkNodeOffset.height <= linkNodeOffset.top) {
                placements[1] = 'bottom';
                placement = placement.replace('top', 'bottom');
              }
              break;
            case 'bottom':
              if (nodeSize.height - linkNodeOffset.height > linkNodeOffset.top && nodeSize.height - linkNodeOffset.height <= linkNodeOffset.bottom) {
                placements[1] = 'top';
                placement = placement.replace('bottom', 'top');
              }
              break;
            case 'left':
              if (nodeSize.width - linkNodeOffset.width > linkNodeOffset.right && nodeSize.width - linkNodeOffset.width <= linkNodeOffset.left) {
                placements[1] = 'right';
                placement = placement.replace('left', 'right');
              }
              break;
            case 'right':
              if (nodeSize.width - linkNodeOffset.width > linkNodeOffset.left && nodeSize.width - linkNodeOffset.width <= linkNodeOffset.right) {
                placements[1] = 'left';
                placement = placement.replace('right', 'left');
              }
              break;
          }
        }
      }

      calcPosition.placement = placement;

      switch (placements[0]) {
        case 'top':
          calcPosition.top = calcOffset.top - nodeSize.height;
          break;
        case 'bottom':
          calcPosition.top = calcOffset.top + calcOffset.height;
          break;
        case 'left':
          calcPosition.left = calcOffset.left - nodeSize.width;
          break;
        case 'right':
          calcPosition.left = calcOffset.left + calcOffset.width;
          break;
      }

      if (placements[1]) {
        switch (placements[1]) {
          case 'top':
            calcPosition.top = calcOffset.top;
            break;
          case 'bottom':
            calcPosition.top = calcOffset.top + calcOffset.height - nodeSize.height;
            break;
          case 'left':
            calcPosition.left = calcOffset.left;
            break;
          case 'right':
            calcPosition.left = calcOffset.left + calcOffset.width - nodeSize.width;
            break;
        }
      } else {
        if (/(top|bottom)/.test(placements[0])) {
          calcPosition.left = calcOffset.left + ((calcOffset.width - nodeSize.width) / 2);
        } else if (/(left|right)/.test(placements[0])) {
          calcPosition.top = calcOffset.top + ((calcOffset.height - nodeSize.height) / 2);
        }
      }

      return calcPosition;
    };
    
    return self;
}]);

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.4.7/angular.js" data-semver="1.4.7"></script>
    <script src="app.js"></script>
  </head>

  <body class="container-fluid" ng-controller="MainCtrl" style="padding: 20px;">
    <div class="form-group">
      <label>Popup placement</label>
      <select class="form-control" ng-model="vm.selectedPlacement" ng-options="o as o for o in vm.placements"></select>
    </div>
    <div class="form-group">
      <label>Popup content</label>
      <input type="text" class="form-control" ng-model="vm.content" />
    </div>

    <br /><br />
    <div class="row">
      <div class="col-md-4 col-sm-4">
        <div style="position: relative; display: inline-block; margin-left: 150px; margin-top: 150px;">
          <button id="popoverButton" class="btn btn-default" >Popover</button>
          <div id="popoverElement" class="popover" style="display: block; min-width: 200px;" >
            <div class="arrow"></div>
              <h3 class="popover-title">Popover title</h3>
              <div class="popover-content" >
                {{vm.content}}
              </div>
            </div>
        </div>
      </div>
      <div class="col-md-4 col-sm-4">
        <div class="dropdown" style="position: relative; display: inline-block; margin-left: 150px; margin-top: 150px;">
          <button class="btn btn-default dropdown-toggle">
            Dropdown<span class="caret"></span>
          </button>
          <ul class="dropdown-menu" style="display: block; min-width: 200px;" ng-class="vm.selectedPlacement">
            <li><a>Action</a></li>
            <li><a>Another action</a></li>
            <li><a>Something else here</a></li>
            <li><a>Separated link</a></li>
          </ul>
        </div>
      </div>
      <div class="col-md-4 col-sm-4">
        <div style="position: relative; display: inline-block; margin-left: 150px; margin-top: 150px;">
          <button class="btn btn-default">Tooltip</button>
          <div class="tooltip" style="opacity: 1;" ng-class="vm.selectedPlacement">
            <div class="tooltip-arrow"></div>
              <div class="tooltip-inner" style="min-width: 200px;">
                {{vm.content}}
              </div>
            </div>
          </div>
      </div>
    </div>
  </body>

</html>

.top {
  top: auto;
  bottom: 100%;
  left: 50%;
  right: auto;
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.top.dropdown-menu {
  margin-top: 2px;
}
.top.popover {
  margin-bottom: 11px;
}
.top.popover > .arrow {
  left: 50%;
  margin-left: -11px;
  border-bottom-width: 0;
  border-top-color: rgba(0, 0, 0, 0.25);
  bottom: -11px;
  margin-bottom: 0px;
}
.top.popover > .arrow:after {
  content: " ";
  margin-left: -10px;
}
.top.popover > .arrow:after {
  bottom: 1px;
  border-bottom-width: 0;
  border-top-color: #ffffff;
}
.top.tooltip {
  margin-bottom: 5px;
  /*override bootstrap style*/
  padding: 0px;
}
.top.tooltip > .tooltip-arrow {
  left: 50%;
  margin-left: -5px;
  border-bottom-width: 0;
  border-top-color: #000000;
  bottom: -5px;
  margin-bottom: 0px;
}
.top.tooltip > .tooltip-arrow:after {
  content: " ";
  margin-left: -5px;
}
.top.tooltip > .tooltip-arrow:after {
  bottom: 1px;
  border-bottom-width: 0;
  border-top-color: #000000;
}
.top-left {
  top: auto;
  bottom: 100%;
  left: 0;
  right: auto;
}
.top-left.dropdown-menu {
  margin-top: 2px;
}
.top-left.popover {
  margin-bottom: 11px;
}
.top-left.popover > .arrow {
  left: 50%;
  margin-left: -11px;
  border-bottom-width: 0;
  border-top-color: rgba(0, 0, 0, 0.25);
  bottom: -11px;
  margin-bottom: 0px;
}
.top-left.popover > .arrow:after {
  content: " ";
  margin-left: -10px;
}
.top-left.popover > .arrow:after {
  bottom: 1px;
  border-bottom-width: 0;
  border-top-color: #ffffff;
}
.top-left.tooltip {
  margin-bottom: 5px;
  /*override bootstrap style*/
  padding: 0px;
}
.top-left.tooltip > .tooltip-arrow {
  left: 50%;
  margin-left: -5px;
  border-bottom-width: 0;
  border-top-color: #000000;
  bottom: -5px;
  margin-bottom: 0px;
}
.top-left.tooltip > .tooltip-arrow:after {
  content: " ";
  margin-left: -5px;
}
.top-left.tooltip > .tooltip-arrow:after {
  bottom: 1px;
  border-bottom-width: 0;
  border-top-color: #000000;
}
.top-left.popover > .arrow {
  left: 6px;
  right: auto;
  margin-left: 0px;
}
.top-left.tooltip > .tooltip-arrow {
  left: 4px;
  right: auto;
  margin-left: 0px;
}
.top-right {
  top: auto;
  bottom: 100%;
  left: auto;
  right: 0;
}
.top-right.dropdown-menu {
  margin-top: 2px;
}
.top-right.popover {
  margin-bottom: 11px;
}
.top-right.popover > .arrow {
  left: 50%;
  margin-left: -11px;
  border-bottom-width: 0;
  border-top-color: rgba(0, 0, 0, 0.25);
  bottom: -11px;
  margin-bottom: 0px;
}
.top-right.popover > .arrow:after {
  content: " ";
  margin-left: -10px;
}
.top-right.popover > .arrow:after {
  bottom: 1px;
  border-bottom-width: 0;
  border-top-color: #ffffff;
}
.top-right.tooltip {
  margin-bottom: 5px;
  /*override bootstrap style*/
  padding: 0px;
}
.top-right.tooltip > .tooltip-arrow {
  left: 50%;
  margin-left: -5px;
  border-bottom-width: 0;
  border-top-color: #000000;
  bottom: -5px;
  margin-bottom: 0px;
}
.top-right.tooltip > .tooltip-arrow:after {
  content: " ";
  margin-left: -5px;
}
.top-right.tooltip > .tooltip-arrow:after {
  bottom: 1px;
  border-bottom-width: 0;
  border-top-color: #000000;
}
.top-right.popover > .arrow {
  left: auto;
  right: 6px;
  margin-left: 0px;
}
.top-right.tooltip > .tooltip-arrow {
  left: auto;
  right: 4px;
  margin-left: 0px;
}
.bottom {
  top: 100%;
  bottom: auto;
  left: 50%;
  right: auto;
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.bottom.dropdown-menu {
  margin-bottom: 2px;
}
.bottom.popover {
  margin-top: 11px;
}
.bottom.popover > .arrow {
  left: 50%;
  margin-left: -11px;
  border-top-width: 0;
  border-bottom-color: rgba(0, 0, 0, 0.25);
  top: -11px;
  margin-top: 0px;
}
.bottom.popover > .arrow:after {
  content: " ";
  margin-left: -10px;
}
.bottom.popover > .arrow:after {
  top: 1px;
  border-top-width: 0;
  border-bottom-color: #ffffff;
}
.bottom.tooltip {
  margin-top: 5px;
  /*override bootstrap style*/
  padding: 0px;
}
.bottom.tooltip > .tooltip-arrow {
  left: 50%;
  margin-left: -5px;
  border-top-width: 0;
  border-bottom-color: #000000;
  top: -5px;
  margin-top: 0px;
}
.bottom.tooltip > .tooltip-arrow:after {
  content: " ";
  margin-left: -5px;
}
.bottom.tooltip > .tooltip-arrow:after {
  top: 1px;
  border-top-width: 0;
  border-bottom-color: #000000;
}
.bottom-left {
  top: 100%;
  bottom: auto;
  left: 0;
  right: auto;
}
.bottom-left.dropdown-menu {
  margin-bottom: 2px;
}
.bottom-left.popover {
  margin-top: 11px;
}
.bottom-left.popover > .arrow {
  left: 50%;
  margin-left: -11px;
  border-top-width: 0;
  border-bottom-color: rgba(0, 0, 0, 0.25);
  top: -11px;
  margin-top: 0px;
}
.bottom-left.popover > .arrow:after {
  content: " ";
  margin-left: -10px;
}
.bottom-left.popover > .arrow:after {
  top: 1px;
  border-top-width: 0;
  border-bottom-color: #ffffff;
}
.bottom-left.tooltip {
  margin-top: 5px;
  /*override bootstrap style*/
  padding: 0px;
}
.bottom-left.tooltip > .tooltip-arrow {
  left: 50%;
  margin-left: -5px;
  border-top-width: 0;
  border-bottom-color: #000000;
  top: -5px;
  margin-top: 0px;
}
.bottom-left.tooltip > .tooltip-arrow:after {
  content: " ";
  margin-left: -5px;
}
.bottom-left.tooltip > .tooltip-arrow:after {
  top: 1px;
  border-top-width: 0;
  border-bottom-color: #000000;
}
.bottom-left.popover > .arrow {
  left: 6px;
  right: auto;
  margin-left: 0px;
}
.bottom-left.tooltip > .tooltip-arrow {
  left: 4px;
  right: auto;
  margin-left: 0px;
}
.bottom-right {
  top: 100%;
  bottom: auto;
  left: auto;
  right: 0;
}
.bottom-right.dropdown-menu {
  margin-bottom: 2px;
}
.bottom-right.popover {
  margin-top: 11px;
}
.bottom-right.popover > .arrow {
  left: 50%;
  margin-left: -11px;
  border-top-width: 0;
  border-bottom-color: rgba(0, 0, 0, 0.25);
  top: -11px;
  margin-top: 0px;
}
.bottom-right.popover > .arrow:after {
  content: " ";
  margin-left: -10px;
}
.bottom-right.popover > .arrow:after {
  top: 1px;
  border-top-width: 0;
  border-bottom-color: #ffffff;
}
.bottom-right.tooltip {
  margin-top: 5px;
  /*override bootstrap style*/
  padding: 0px;
}
.bottom-right.tooltip > .tooltip-arrow {
  left: 50%;
  margin-left: -5px;
  border-top-width: 0;
  border-bottom-color: #000000;
  top: -5px;
  margin-top: 0px;
}
.bottom-right.tooltip > .tooltip-arrow:after {
  content: " ";
  margin-left: -5px;
}
.bottom-right.tooltip > .tooltip-arrow:after {
  top: 1px;
  border-top-width: 0;
  border-bottom-color: #000000;
}
.bottom-right.popover > .arrow {
  left: auto;
  right: 6px;
  margin-left: 0px;
}
.bottom-right.tooltip > .tooltip-arrow {
  left: auto;
  right: 4px;
  margin-left: 0px;
}
.left {
  left: auto;
  right: 100%;
  top: 50%;
  bottom: auto;
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.left.dropdown-menu {
  margin-right: 2px;
}
.left.popover {
  margin-right: 11px;
}
.left.popover > .arrow {
  top: 50%;
  margin-top: -11px;
  border-right-width: 0;
  border-left-color: rgba(0, 0, 0, 0.25);
  right: -11px;
  margin-right: 0px;
}
.left.popover > .arrow:after {
  content: " ";
  margin-top: -10px;
}
.left.popover > .arrow:after {
  right: 1px;
  border-right-width: 0;
  border-left-color: #ffffff;
}
.left.tooltip {
  margin-right: 5px;
  /*override bootstrap style*/
  padding: 0px;
}
.left.tooltip > .tooltip-arrow {
  border-width: 5px;
  top: 50%;
  margin-top: -5px;
  border-right-width: 0;
  border-left-color: #000000;
  right: -5px;
  margin-right: 0px;
}
.left.tooltip > .tooltip-arrow:after {
  content: " ";
  margin-top: -5px;
}
.left.tooltip > .tooltip-arrow:after {
  right: 1px;
  border-right-width: 0;
  border-left-color: #000000;
}
.left-top {
  left: auto;
  right: 100%;
  top: 0;
  bottom: auto;
}
.left-top.dropdown-menu {
  margin-right: 2px;
}
.left-top.popover {
  margin-right: 11px;
}
.left-top.popover > .arrow {
  top: 50%;
  margin-top: -11px;
  border-right-width: 0;
  border-left-color: rgba(0, 0, 0, 0.25);
  right: -11px;
  margin-right: 0px;
}
.left-top.popover > .arrow:after {
  content: " ";
  margin-top: -10px;
}
.left-top.popover > .arrow:after {
  right: 1px;
  border-right-width: 0;
  border-left-color: #ffffff;
}
.left-top.tooltip {
  margin-right: 5px;
  /*override bootstrap style*/
  padding: 0px;
}
.left-top.tooltip > .tooltip-arrow {
  border-width: 5px;
  top: 50%;
  margin-top: -5px;
  border-right-width: 0;
  border-left-color: #000000;
  right: -5px;
  margin-right: 0px;
}
.left-top.tooltip > .tooltip-arrow:after {
  content: " ";
  margin-top: -5px;
}
.left-top.tooltip > .tooltip-arrow:after {
  right: 1px;
  border-right-width: 0;
  border-left-color: #000000;
}
.left-top.popover > .arrow {
  top: 6px;
  bottom: auto;
  margin-top: 0px;
}
.left-top.tooltip > .tooltip-arrow {
  top: 4px;
  bottom: auto;
  margin-top: 0px;
}
.left-bottom {
  left: auto;
  right: 100%;
  top: auto;
  bottom: 0;
}
.left-bottom.dropdown-menu {
  margin-right: 2px;
}
.left-bottom.popover {
  margin-right: 11px;
}
.left-bottom.popover > .arrow {
  top: 50%;
  margin-top: -11px;
  border-right-width: 0;
  border-left-color: rgba(0, 0, 0, 0.25);
  right: -11px;
  margin-right: 0px;
}
.left-bottom.popover > .arrow:after {
  content: " ";
  margin-top: -10px;
}
.left-bottom.popover > .arrow:after {
  right: 1px;
  border-right-width: 0;
  border-left-color: #ffffff;
}
.left-bottom.tooltip {
  margin-right: 5px;
  /*override bootstrap style*/
  padding: 0px;
}
.left-bottom.tooltip > .tooltip-arrow {
  border-width: 5px;
  top: 50%;
  margin-top: -5px;
  border-right-width: 0;
  border-left-color: #000000;
  right: -5px;
  margin-right: 0px;
}
.left-bottom.tooltip > .tooltip-arrow:after {
  content: " ";
  margin-top: -5px;
}
.left-bottom.tooltip > .tooltip-arrow:after {
  right: 1px;
  border-right-width: 0;
  border-left-color: #000000;
}
.left-bottom.popover > .arrow {
  top: auto;
  bottom: 6px;
  margin-top: 0px;
}
.left-bottom.tooltip > .tooltip-arrow {
  top: auto;
  bottom: 4px;
  margin-top: 0px;
}
.right {
  left: 100%;
  right: auto;
  top: 50%;
  bottom: auto;
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.right.dropdown-menu {
  margin-left: 2px;
}
.right.popover {
  margin-left: 11px;
}
.right.popover > .arrow {
  top: 50%;
  margin-top: -11px;
  border-left-width: 0;
  border-right-color: rgba(0, 0, 0, 0.25);
  left: -11px;
  margin-left: 0px;
}
.right.popover > .arrow:after {
  content: " ";
  margin-top: -10px;
}
.right.popover > .arrow:after {
  left: 1px;
  border-left-width: 0;
  border-right-color: #ffffff;
}
.right.tooltip {
  margin-left: 5px;
  /*override bootstrap style*/
  padding: 0px;
}
.right.tooltip > .tooltip-arrow {
  border-width: 5px;
  top: 50%;
  margin-top: -5px;
  border-left-width: 0;
  border-right-color: #000000;
  left: -5px;
  margin-left: 0px;
}
.right.tooltip > .tooltip-arrow:after {
  content: " ";
  margin-top: -5px;
}
.right.tooltip > .tooltip-arrow:after {
  left: 1px;
  border-left-width: 0;
  border-right-color: #000000;
}
.right-top {
  left: 100%;
  right: auto;
  top: 0;
  bottom: auto;
}
.right-top.dropdown-menu {
  margin-left: 2px;
}
.right-top.popover {
  margin-left: 11px;
}
.right-top.popover > .arrow {
  top: 50%;
  margin-top: -11px;
  border-left-width: 0;
  border-right-color: rgba(0, 0, 0, 0.25);
  left: -11px;
  margin-left: 0px;
}
.right-top.popover > .arrow:after {
  content: " ";
  margin-top: -10px;
}
.right-top.popover > .arrow:after {
  left: 1px;
  border-left-width: 0;
  border-right-color: #ffffff;
}
.right-top.tooltip {
  margin-left: 5px;
  /*override bootstrap style*/
  padding: 0px;
}
.right-top.tooltip > .tooltip-arrow {
  border-width: 5px;
  top: 50%;
  margin-top: -5px;
  border-left-width: 0;
  border-right-color: #000000;
  left: -5px;
  margin-left: 0px;
}
.right-top.tooltip > .tooltip-arrow:after {
  content: " ";
  margin-top: -5px;
}
.right-top.tooltip > .tooltip-arrow:after {
  left: 1px;
  border-left-width: 0;
  border-right-color: #000000;
}
.right-top.popover > .arrow {
  top: 6px;
  bottom: auto;
  margin-top: 0px;
}
.right-top.tooltip > .tooltip-arrow {
  top: 4px;
  bottom: auto;
  margin-top: 0px;
}
.right-bottom {
  left: 100%;
  right: auto;
  top: auto;
  bottom: 0;
}
.right-bottom.dropdown-menu {
  margin-left: 2px;
}
.right-bottom.popover {
  margin-left: 11px;
}
.right-bottom.popover > .arrow {
  top: 50%;
  margin-top: -11px;
  border-left-width: 0;
  border-right-color: rgba(0, 0, 0, 0.25);
  left: -11px;
  margin-left: 0px;
}
.right-bottom.popover > .arrow:after {
  content: " ";
  margin-top: -10px;
}
.right-bottom.popover > .arrow:after {
  left: 1px;
  border-left-width: 0;
  border-right-color: #ffffff;
}
.right-bottom.tooltip {
  margin-left: 5px;
  /*override bootstrap style*/
  padding: 0px;
}
.right-bottom.tooltip > .tooltip-arrow {
  border-width: 5px;
  top: 50%;
  margin-top: -5px;
  border-left-width: 0;
  border-right-color: #000000;
  left: -5px;
  margin-left: 0px;
}
.right-bottom.tooltip > .tooltip-arrow:after {
  content: " ";
  margin-top: -5px;
}
.right-bottom.tooltip > .tooltip-arrow:after {
  left: 1px;
  border-left-width: 0;
  border-right-color: #000000;
}
.right-bottom.popover > .arrow {
  top: auto;
  bottom: 6px;
  margin-top: 0px;
}
.right-bottom.tooltip > .tooltip-arrow {
  top: auto;
  bottom: 4px;
  margin-top: 0px;
}
.left-top-corner {
  top: auto;
  bottom: 100%;
  left: auto;
  right: 100%;
}
.left-top-corner.dropdown-menu {
  margin-top: 2px;
}
.left-top-corner.popover {
  margin-bottom: 11px;
}
.left-top-corner.popover > .arrow {
  left: 50%;
  margin-left: -11px;
  border-bottom-width: 0;
  border-top-color: rgba(0, 0, 0, 0.25);
  bottom: -11px;
  margin-bottom: 0px;
}
.left-top-corner.popover > .arrow:after {
  content: " ";
  margin-left: -10px;
}
.left-top-corner.popover > .arrow:after {
  bottom: 1px;
  border-bottom-width: 0;
  border-top-color: #ffffff;
}
.left-top-corner.tooltip {
  margin-bottom: 5px;
  /*override bootstrap style*/
  padding: 0px;
}
.left-top-corner.tooltip > .tooltip-arrow {
  left: 50%;
  margin-left: -5px;
  border-bottom-width: 0;
  border-top-color: #000000;
  bottom: -5px;
  margin-bottom: 0px;
}
.left-top-corner.tooltip > .tooltip-arrow:after {
  content: " ";
  margin-left: -5px;
}
.left-top-corner.tooltip > .tooltip-arrow:after {
  bottom: 1px;
  border-bottom-width: 0;
  border-top-color: #000000;
}
.left-top-corner.dropdown-menu {
  margin-right: 2px;
}
.left-top-corner.popover {
  margin-right: 11px;
}
.left-top-corner.popover > .arrow {
  top: 50%;
  margin-top: -11px;
  border-right-width: 0;
  border-left-color: rgba(0, 0, 0, 0.25);
  right: -11px;
  margin-right: 0px;
}
.left-top-corner.popover > .arrow:after {
  content: " ";
  margin-top: -10px;
}
.left-top-corner.popover > .arrow:after {
  right: 1px;
  border-right-width: 0;
  border-left-color: #ffffff;
}
.left-top-corner.tooltip {
  margin-right: 5px;
  /*override bootstrap style*/
  padding: 0px;
}
.left-top-corner.tooltip > .tooltip-arrow {
  border-width: 5px;
  top: 50%;
  margin-top: -5px;
  border-right-width: 0;
  border-left-color: #000000;
  right: -5px;
  margin-right: 0px;
}
.left-top-corner.tooltip > .tooltip-arrow:after {
  content: " ";
  margin-top: -5px;
}
.left-top-corner.tooltip > .tooltip-arrow:after {
  right: 1px;
  border-right-width: 0;
  border-left-color: #000000;
}
.left-top-corner.popover {
  margin: 0px;
}
.left-top-corner.popover > .arrow {
  display: none;
}
.left-top-corner.tooltip {
  margin: 0px;
}
.left-top-corner.tooltip > .tooltip-arrow {
  display: none;
}
.left-bottom-corner {
  top: 100%;
  bottom: auto;
  left: auto;
  right: 100%;
}
.left-bottom-corner.dropdown-menu {
  margin-bottom: 2px;
}
.left-bottom-corner.popover {
  margin-top: 11px;
}
.left-bottom-corner.popover > .arrow {
  left: 50%;
  margin-left: -11px;
  border-top-width: 0;
  border-bottom-color: rgba(0, 0, 0, 0.25);
  top: -11px;
  margin-top: 0px;
}
.left-bottom-corner.popover > .arrow:after {
  content: " ";
  margin-left: -10px;
}
.left-bottom-corner.popover > .arrow:after {
  top: 1px;
  border-top-width: 0;
  border-bottom-color: #ffffff;
}
.left-bottom-corner.tooltip {
  margin-top: 5px;
  /*override bootstrap style*/
  padding: 0px;
}
.left-bottom-corner.tooltip > .tooltip-arrow {
  left: 50%;
  margin-left: -5px;
  border-top-width: 0;
  border-bottom-color: #000000;
  top: -5px;
  margin-top: 0px;
}
.left-bottom-corner.tooltip > .tooltip-arrow:after {
  content: " ";
  margin-left: -5px;
}
.left-bottom-corner.tooltip > .tooltip-arrow:after {
  top: 1px;
  border-top-width: 0;
  border-bottom-color: #000000;
}
.left-bottom-corner.dropdown-menu {
  margin-right: 2px;
}
.left-bottom-corner.popover {
  margin-right: 11px;
}
.left-bottom-corner.popover > .arrow {
  top: 50%;
  margin-top: -11px;
  border-right-width: 0;
  border-left-color: rgba(0, 0, 0, 0.25);
  right: -11px;
  margin-right: 0px;
}
.left-bottom-corner.popover > .arrow:after {
  content: " ";
  margin-top: -10px;
}
.left-bottom-corner.popover > .arrow:after {
  right: 1px;
  border-right-width: 0;
  border-left-color: #ffffff;
}
.left-bottom-corner.tooltip {
  margin-right: 5px;
  /*override bootstrap style*/
  padding: 0px;
}
.left-bottom-corner.tooltip > .tooltip-arrow {
  border-width: 5px;
  top: 50%;
  margin-top: -5px;
  border-right-width: 0;
  border-left-color: #000000;
  right: -5px;
  margin-right: 0px;
}
.left-bottom-corner.tooltip > .tooltip-arrow:after {
  content: " ";
  margin-top: -5px;
}
.left-bottom-corner.tooltip > .tooltip-arrow:after {
  right: 1px;
  border-right-width: 0;
  border-left-color: #000000;
}
.left-bottom-corner.popover {
  margin: 0px;
}
.left-bottom-corner.popover > .arrow {
  display: none;
}
.left-bottom-corner.tooltip {
  margin: 0px;
}
.left-bottom-corner.tooltip > .tooltip-arrow {
  display: none;
}
.right-top-corner {
  top: auto;
  bottom: 100%;
  left: 100%;
  right: auto;
}
.right-top-corner.dropdown-menu {
  margin-top: 2px;
}
.right-top-corner.popover {
  margin-bottom: 11px;
}
.right-top-corner.popover > .arrow {
  left: 50%;
  margin-left: -11px;
  border-bottom-width: 0;
  border-top-color: rgba(0, 0, 0, 0.25);
  bottom: -11px;
  margin-bottom: 0px;
}
.right-top-corner.popover > .arrow:after {
  content: " ";
  margin-left: -10px;
}
.right-top-corner.popover > .arrow:after {
  bottom: 1px;
  border-bottom-width: 0;
  border-top-color: #ffffff;
}
.right-top-corner.tooltip {
  margin-bottom: 5px;
  /*override bootstrap style*/
  padding: 0px;
}
.right-top-corner.tooltip > .tooltip-arrow {
  left: 50%;
  margin-left: -5px;
  border-bottom-width: 0;
  border-top-color: #000000;
  bottom: -5px;
  margin-bottom: 0px;
}
.right-top-corner.tooltip > .tooltip-arrow:after {
  content: " ";
  margin-left: -5px;
}
.right-top-corner.tooltip > .tooltip-arrow:after {
  bottom: 1px;
  border-bottom-width: 0;
  border-top-color: #000000;
}
.right-top-corner.dropdown-menu {
  margin-left: 2px;
}
.right-top-corner.popover {
  margin-left: 11px;
}
.right-top-corner.popover > .arrow {
  top: 50%;
  margin-top: -11px;
  border-left-width: 0;
  border-right-color: rgba(0, 0, 0, 0.25);
  left: -11px;
  margin-left: 0px;
}
.right-top-corner.popover > .arrow:after {
  content: " ";
  margin-top: -10px;
}
.right-top-corner.popover > .arrow:after {
  left: 1px;
  border-left-width: 0;
  border-right-color: #ffffff;
}
.right-top-corner.tooltip {
  margin-left: 5px;
  /*override bootstrap style*/
  padding: 0px;
}
.right-top-corner.tooltip > .tooltip-arrow {
  border-width: 5px;
  top: 50%;
  margin-top: -5px;
  border-left-width: 0;
  border-right-color: #000000;
  left: -5px;
  margin-left: 0px;
}
.right-top-corner.tooltip > .tooltip-arrow:after {
  content: " ";
  margin-top: -5px;
}
.right-top-corner.tooltip > .tooltip-arrow:after {
  left: 1px;
  border-left-width: 0;
  border-right-color: #000000;
}
.right-top-corner.popover {
  margin: 0px;
}
.right-top-corner.popover > .arrow {
  display: none;
}
.right-top-corner.tooltip {
  margin: 0px;
}
.right-top-corner.tooltip > .tooltip-arrow {
  display: none;
}
.right-bottom-corner {
  top: 100%;
  bottom: auto;
  left: 100%;
  right: auto;
}
.right-bottom-corner.dropdown-menu {
  margin-bottom: 2px;
}
.right-bottom-corner.popover {
  margin-top: 11px;
}
.right-bottom-corner.popover > .arrow {
  left: 50%;
  margin-left: -11px;
  border-top-width: 0;
  border-bottom-color: rgba(0, 0, 0, 0.25);
  top: -11px;
  margin-top: 0px;
}
.right-bottom-corner.popover > .arrow:after {
  content: " ";
  margin-left: -10px;
}
.right-bottom-corner.popover > .arrow:after {
  top: 1px;
  border-top-width: 0;
  border-bottom-color: #ffffff;
}
.right-bottom-corner.tooltip {
  margin-top: 5px;
  /*override bootstrap style*/
  padding: 0px;
}
.right-bottom-corner.tooltip > .tooltip-arrow {
  left: 50%;
  margin-left: -5px;
  border-top-width: 0;
  border-bottom-color: #000000;
  top: -5px;
  margin-top: 0px;
}
.right-bottom-corner.tooltip > .tooltip-arrow:after {
  content: " ";
  margin-left: -5px;
}
.right-bottom-corner.tooltip > .tooltip-arrow:after {
  top: 1px;
  border-top-width: 0;
  border-bottom-color: #000000;
}
.right-bottom-corner.dropdown-menu {
  margin-left: 2px;
}
.right-bottom-corner.popover {
  margin-left: 11px;
}
.right-bottom-corner.popover > .arrow {
  top: 50%;
  margin-top: -11px;
  border-left-width: 0;
  border-right-color: rgba(0, 0, 0, 0.25);
  left: -11px;
  margin-left: 0px;
}
.right-bottom-corner.popover > .arrow:after {
  content: " ";
  margin-top: -10px;
}
.right-bottom-corner.popover > .arrow:after {
  left: 1px;
  border-left-width: 0;
  border-right-color: #ffffff;
}
.right-bottom-corner.tooltip {
  margin-left: 5px;
  /*override bootstrap style*/
  padding: 0px;
}
.right-bottom-corner.tooltip > .tooltip-arrow {
  border-width: 5px;
  top: 50%;
  margin-top: -5px;
  border-left-width: 0;
  border-right-color: #000000;
  left: -5px;
  margin-left: 0px;
}
.right-bottom-corner.tooltip > .tooltip-arrow:after {
  content: " ";
  margin-top: -5px;
}
.right-bottom-corner.tooltip > .tooltip-arrow:after {
  left: 1px;
  border-left-width: 0;
  border-right-color: #000000;
}
.right-bottom-corner.popover {
  margin: 0px;
}
.right-bottom-corner.popover > .arrow {
  display: none;
}
.right-bottom-corner.tooltip {
  margin: 0px;
}
.right-bottom-corner.tooltip > .tooltip-arrow {
  display: none;
}

@border-radius-large:                 6px;
@border-radius-base:                  4px;

@popover-arrow-width:                 10px;
@popover-border-color:                rgba(0,0,0,.2);
@popover-arrow-color:                 #fff;
@popover-arrow-outer-width:           (@popover-arrow-width + 1);
@popover-arrow-outer-color:           fadein(@popover-border-color, 5%);

@tooltip-arrow-width:                 5px;
@tooltip-arrow-color:               #000;

.vertical-center() {
    top: 50%;
    bottom: auto;
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.horizontal-center() {
    left: 50%;
    right: auto;
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.top-primary() {
    top: auto;
    bottom: 100%;
    &.dropdown-menu {
        margin-top: 2px;
    }
    &.popover {
        margin-bottom: @popover-arrow-outer-width;
        &> .arrow {
            .top-primary-arrow(@popover-arrow-width, @popover-arrow-outer-width, @popover-arrow-color, @popover-arrow-outer-color);
        }
    }
    &.tooltip {
        margin-bottom: @tooltip-arrow-width;
        /*override bootstrap style*/
        padding: 0px;
        &> .tooltip-arrow {
            .top-primary-arrow(@tooltip-arrow-width, @tooltip-arrow-width, @tooltip-arrow-color, @tooltip-arrow-color);
        }
    }
}

.top-secondary() {
    top: 0;
    bottom: auto;
    &.popover > .arrow {
        .top-secondary-arrow(@border-radius-large);
    }
    &.tooltip > .tooltip-arrow {
        .top-secondary-arrow(@border-radius-base);
    }
}

.bottom-primary() {
    top: 100%;
    bottom: auto;
    &.dropdown-menu {
        margin-bottom: 2px;
    }
    &.popover {
        margin-top: @popover-arrow-outer-width;
        &> .arrow {
            .bottom-primary-arrow(@popover-arrow-width, @popover-arrow-outer-width, @popover-arrow-color, @popover-arrow-outer-color);
        }
    }
    &.tooltip {
        margin-top: @tooltip-arrow-width;
        /*override bootstrap style*/
        padding: 0px;
        &> .tooltip-arrow {
            .bottom-primary-arrow(@tooltip-arrow-width, @tooltip-arrow-width, @tooltip-arrow-color, @tooltip-arrow-color);
        }
    }
}

.bottom-secondary() {
    top: auto;
    bottom: 0;
    &.popover > .arrow {
        .bottom-secondary-arrow(@border-radius-large);
    }
    &.tooltip > .tooltip-arrow {
        .bottom-secondary-arrow(@border-radius-base);
    }
}

.left-primary() {
    left: auto;
    right: 100%;
    &.dropdown-menu {
        margin-right: 2px;
    }
    &.popover {
        margin-right: @popover-arrow-outer-width;
        &> .arrow {
            .left-primary-arrow(@popover-arrow-width, @popover-arrow-outer-width, @popover-arrow-color, @popover-arrow-outer-color)
        }
    }
    &.tooltip {
        margin-right: @tooltip-arrow-width;
        /*override bootstrap style*/
        padding: 0px;
        &> .tooltip-arrow {
            border-width: @tooltip-arrow-width;
            .left-primary-arrow(@tooltip-arrow-width, @tooltip-arrow-width, @tooltip-arrow-color, @tooltip-arrow-color);
        }
    }
}

.left-secondary() {
    left: 0;
    right: auto;
    &.popover > .arrow {
        .left-secondary-arrow(@border-radius-large);
    }
    &.tooltip > .tooltip-arrow {
        .left-secondary-arrow(@border-radius-base);
    }
}

.right-primary() {
    left: 100%;
    right: auto;
    &.dropdown-menu{
        margin-left: 2px;
    }
    &.popover {
        margin-left: @popover-arrow-outer-width;
        &> .arrow {
            .right-primary-arrow(@popover-arrow-width, @popover-arrow-outer-width, @popover-arrow-color, @popover-arrow-outer-color)
        }
    }
    &.tooltip {
        margin-left: @tooltip-arrow-width;
        /*override bootstrap style*/
        padding: 0px;
        &> .tooltip-arrow {
            border-width: @tooltip-arrow-width;
            .right-primary-arrow(@tooltip-arrow-width, @tooltip-arrow-width, @tooltip-arrow-color, @tooltip-arrow-color);
        }
    }
}

.right-secondary() {
    left: auto;
    right: 0;
    &.popover > .arrow {
        .right-secondary-arrow(@border-radius-large);
    }
    &.tooltip > .tooltip-arrow {
        .right-secondary-arrow(@border-radius-base);
    }
}


.horizontal-arrow(@arrow-width, @arrow-outer-width) {
    left: 50%;
    margin-left: -@arrow-outer-width;
    &:after {
        content: " ";
        margin-left: -@arrow-width;
    }
}

.vertical-arrow(@arrow-width, @arrow-outer-width) {
    top: 50%;
    margin-top: -@arrow-outer-width;
    &:after {
        content: " ";
        margin-top: -@arrow-width;
    }
}

.top-primary-arrow(@arrow-width, @arrow-outer-width, @arrow-color, @arrow-outer-color) {
    .horizontal-arrow(@arrow-width, @arrow-outer-width);
    border-bottom-width: 0;
    border-top-color: @arrow-outer-color;
    bottom: -@arrow-outer-width;
    margin-bottom: 0px;
    &:after {
        bottom: 1px;
        border-bottom-width: 0;
        border-top-color: @arrow-color;
    }
}

.top-secondary-arrow(@offset) {
    top: @offset;
    bottom: auto;
    margin-top: 0px;
}

.bottom-primary-arrow(@arrow-width, @arrow-outer-width, @arrow-color, @arrow-outer-color) {
   .horizontal-arrow(@arrow-width, @arrow-outer-width);
    border-top-width: 0;
    border-bottom-color: @arrow-outer-color;
    top: -@arrow-outer-width;
    margin-top: 0px;
    &:after {
        top: 1px;
        border-top-width: 0;
        border-bottom-color: @arrow-color;
    }
}

.bottom-secondary-arrow(@offset){
    top: auto;
    bottom: @offset;
    margin-top: 0px;
}

.left-primary-arrow(@arrow-width, @arrow-outer-width, @arrow-color, @arrow-outer-color) {
    .vertical-arrow(@arrow-width, @arrow-outer-width);
    border-right-width: 0;
    border-left-color: @arrow-outer-color;
    right: -@arrow-outer-width;
    margin-right: 0px;
    &:after {
        right: 1px;
        border-right-width: 0;
        border-left-color: @arrow-color;
    }
}

.left-secondary-arrow(@offset) {
    left: @offset;
    right: auto;
    margin-left: 0px;
}

.right-primary-arrow(@arrow-width, @arrow-outer-width, @arrow-color, @arrow-outer-color) {
    .vertical-arrow(@arrow-width, @arrow-outer-width);
    border-left-width: 0;
    border-right-color: @arrow-outer-color;
    left: -@arrow-outer-width;
    margin-left: 0px;
    &:after {
        left: 1px;
        border-left-width: 0;
        border-right-color: @arrow-color;
    }
}

.right-secondary-arrow(@offset) {
    left: auto;
    right: @offset;
    margin-left: 0px;
}

.top {
    .top-primary();
    .horizontal-center();
}

.top-left {
    .top-primary();
    .left-secondary();
}

.top-right {
    .top-primary();
    .right-secondary();
}

.bottom {
    .bottom-primary();
    .horizontal-center();
}

.bottom-left {
    .bottom-primary();
    .left-secondary();
}

.bottom-right {
    .bottom-primary();
    .right-secondary();
}

.left {
    .left-primary();
    .vertical-center();
}

.left-top {
    .left-primary();
    .top-secondary();
}

.left-bottom {
    .left-primary();
    .bottom-secondary();
}

.right {
    .right-primary();
    .vertical-center();
}

.right-top {
    .right-primary();
    .top-secondary();
}

.right-bottom {
    .right-primary();
    .bottom-secondary();
}

.left-top-corner {
    .top-primary();
    .left-primary();
    &.popover {
        margin: 0px;
        > .arrow {
            display: none;
        }
    }
    &.tooltip {
        margin: 0px;
        > .tooltip-arrow {
            display: none;
        }
    }
}

.left-bottom-corner {
    .bottom-primary();
    .left-primary();
    &.popover {
        margin: 0px;
        > .arrow {
            display: none;
        }
    }
    &.tooltip {
        margin: 0px;
        > .tooltip-arrow {
            display: none;
        }
    }
}

.right-top-corner {
    .top-primary();
    .right-primary();
    &.popover {
        margin: 0px;
        > .arrow {
            display: none;
        }
    }
    &.tooltip {
        margin: 0px;
        > .tooltip-arrow {
            display: none;
        }
    }
}

.right-bottom-corner {
    .bottom-primary();
    .right-primary();
    &.popover {
        margin: 0px;
        > .arrow {
            display: none;
        }
    }
    &.tooltip {
        margin: 0px;
        > .tooltip-arrow {
            display: none;
        }
    }
}