TWBS popup placement

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container-fluid">
      <div class="form-group">
        <label>Popup placement</label>
          <select class="form-control" id="popupPlacement">
            <option value="top" selected>top</option>
            <option value="top-left">top-left</option>
            <option value="top-right">top-right</option>
            <option value="bottom">bottom</option>
            <option value="bottom-left">bottom-left</option>
            <option value="bottom-right">bottom-right</option>
            <option value="left">left</option>
            <option value="left-top">left-top</option>
            <option value="left-bottom">left-bottom</option>
            <option value="right">right</option>
            <option value="right-top">right-top</option>
            <option value="right-bottom">right-bottom</option>
            <option value="left-top-corner">left-top-corner</option>
            <option value="left-bottom-corner">left-bottom-corner</option>
            <option value="right-top-corner">right-top-corner</option>
            <option value="right-bottom-corner">right-bottom-corner</option>
          </select>
      </div>
      <div class="form-group">
        <label>Popup content</label>
        <input type="text" class="form-control" id="popupContent" value="Here is some content that can demonstrate the container growing to desired content size." />
      </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 class="btn btn-default">Popover</button>
              <div id="popoverPopup" class="popover top" style="display: block; min-width: 200px;">
                <div class="arrow"></div>
                <h3 class="popover-title">Popover title</h3>
                <div class="popover-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 id="dropdownPopup" class="dropdown-menu top" style="display: block; min-width: 200px;">
              <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 id="tooltipPopup" class="tooltip top" style="opacity: 1;">
              <div class="tooltip-arrow"></div>
              <div class="tooltip-inner" style="min-width: 200px;"></div>
            </div>
          </div>
        </div>
      </div>
      
    </div>

  </body>

</html>

(function (window, undefined) {
  "use strict";

  var self = {};
  self.selectedPlacement = 'top';
  
  self.placementSelected = function (evt) {
    $('#popoverPopup').removeClass(self.selectedPlacement);
    $('#dropdownPopup').removeClass(self.selectedPlacement);
    $('#tooltipPopup').removeClass(self.selectedPlacement);
    self.selectedPlacement = $('#popupPlacement').val();
    $('#popoverPopup').addClass(self.selectedPlacement);
    $('#dropdownPopup').addClass(self.selectedPlacement);
    $('#tooltipPopup').addClass(self.selectedPlacement);
  };
  
  self.contentChanged = function (evt) {
    var content = $('#popupContent').val();
    $('#popoverPopup .popover-content').html(content);
    $('#tooltipPopup .tooltip-inner').html(content);
  };

  $(document).ready(function() {
    $('#popupPlacement').on('change', self.placementSelected);
    $('#popupContent').on('change', self.contentChanged);
    self.contentChanged();
  });

})(window);

/* Styles go here */
body {
  padding: 20px;
}



.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: 0;
}
.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: 0;
}
.top.tooltip > .tooltip-arrow {
  left: 50%;
  margin-left: -5px;
  border-bottom-width: 0;
  border-top-color: #000000;
  bottom: -5px;
  margin-bottom: 0;
}
.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: 0;
}
.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: 0;
}
.top-left.tooltip > .tooltip-arrow {
  left: 50%;
  margin-left: -5px;
  border-bottom-width: 0;
  border-top-color: #000000;
  bottom: -5px;
  margin-bottom: 0;
}
.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: 0;
}
.top-left.tooltip > .tooltip-arrow {
  left: 4px;
  right: auto;
  margin-left: 0;
}
.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: 0;
}
.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: 0;
}
.top-right.tooltip > .tooltip-arrow {
  left: 50%;
  margin-left: -5px;
  border-bottom-width: 0;
  border-top-color: #000000;
  bottom: -5px;
  margin-bottom: 0;
}
.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: 0;
}
.top-right.tooltip > .tooltip-arrow {
  left: auto;
  right: 4px;
  margin-left: 0;
}
.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: 0;
}
.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: 0;
}
.bottom.tooltip > .tooltip-arrow {
  left: 50%;
  margin-left: -5px;
  border-top-width: 0;
  border-bottom-color: #000000;
  top: -5px;
  margin-top: 0;
}
.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: 0;
}
.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: 0;
}
.bottom-left.tooltip > .tooltip-arrow {
  left: 50%;
  margin-left: -5px;
  border-top-width: 0;
  border-bottom-color: #000000;
  top: -5px;
  margin-top: 0;
}
.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: 0;
}
.bottom-left.tooltip > .tooltip-arrow {
  left: 4px;
  right: auto;
  margin-left: 0;
}
.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: 0;
}
.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: 0;
}
.bottom-right.tooltip > .tooltip-arrow {
  left: 50%;
  margin-left: -5px;
  border-top-width: 0;
  border-bottom-color: #000000;
  top: -5px;
  margin-top: 0;
}
.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: 0;
}
.bottom-right.tooltip > .tooltip-arrow {
  left: auto;
  right: 4px;
  margin-left: 0;
}
.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: 0;
}
.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: 0;
}
.left.tooltip > .tooltip-arrow {
  border-width: 5px;
  top: 50%;
  margin-top: -5px;
  border-right-width: 0;
  border-left-color: #000000;
  right: -5px;
  margin-right: 0;
}
.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: 0;
}
.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: 0;
}
.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: 0;
}
.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: 0;
}
.left-top.tooltip > .tooltip-arrow {
  top: 4px;
  bottom: auto;
  margin-top: 0;
}
.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: 0;
}
.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: 0;
}
.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: 0;
}
.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: 0;
}
.left-bottom.tooltip > .tooltip-arrow {
  top: auto;
  bottom: 4px;
  margin-top: 0;
}
.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: 0;
}
.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: 0;
}
.right.tooltip > .tooltip-arrow {
  border-width: 5px;
  top: 50%;
  margin-top: -5px;
  border-left-width: 0;
  border-right-color: #000000;
  left: -5px;
  margin-left: 0;
}
.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: 0;
}
.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: 0;
}
.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: 0;
}
.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: 0;
}
.right-top.tooltip > .tooltip-arrow {
  top: 4px;
  bottom: auto;
  margin-top: 0;
}
.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: 0;
}
.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: 0;
}
.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: 0;
}
.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: 0;
}
.right-bottom.tooltip > .tooltip-arrow {
  top: auto;
  bottom: 4px;
  margin-top: 0;
}
.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: 0;
}
.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: 0;
}
.left-top-corner.tooltip > .tooltip-arrow {
  left: 50%;
  margin-left: -5px;
  border-bottom-width: 0;
  border-top-color: #000000;
  bottom: -5px;
  margin-bottom: 0;
}
.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: 0;
}
.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: 0;
}
.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: 0;
}
.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: 0;
}
.left-top-corner.popover > .arrow {
  display: none;
}
.left-top-corner.tooltip {
  margin: 0;
}
.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: 0;
}
.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: 0;
}
.left-bottom-corner.tooltip > .tooltip-arrow {
  left: 50%;
  margin-left: -5px;
  border-top-width: 0;
  border-bottom-color: #000000;
  top: -5px;
  margin-top: 0;
}
.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: 0;
}
.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: 0;
}
.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: 0;
}
.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: 0;
}
.left-bottom-corner.popover > .arrow {
  display: none;
}
.left-bottom-corner.tooltip {
  margin: 0;
}
.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: 0;
}
.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: 0;
}
.right-top-corner.tooltip > .tooltip-arrow {
  left: 50%;
  margin-left: -5px;
  border-bottom-width: 0;
  border-top-color: #000000;
  bottom: -5px;
  margin-bottom: 0;
}
.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: 0;
}
.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: 0;
}
.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: 0;
}
.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: 0;
}
.right-top-corner.popover > .arrow {
  display: none;
}
.right-top-corner.tooltip {
  margin: 0;
}
.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: 0;
}
.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: 0;
}
.right-bottom-corner.tooltip > .tooltip-arrow {
  left: 50%;
  margin-left: -5px;
  border-top-width: 0;
  border-bottom-color: #000000;
  top: -5px;
  margin-top: 0;
}
.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: 0;
}
.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: 0;
}
.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: 0;
}
.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: 0;
}
.right-bottom-corner.popover > .arrow {
  display: none;
}
.right-bottom-corner.tooltip {
  margin: 0;
}
.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: 0;
        &> .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: 0;
        &> .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: 0;
        &> .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: 0;
        &> .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: 0;
    &:after {
        bottom: 1px;
        border-bottom-width: 0;
        border-top-color: @arrow-color;
    }
}

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

.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: 0;
    &:after {
        top: 1px;
        border-top-width: 0;
        border-bottom-color: @arrow-color;
    }
}

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

.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: 0;
    &:after {
        right: 1px;
        border-right-width: 0;
        border-left-color: @arrow-color;
    }
}

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

.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: 0;
    &:after {
        left: 1px;
        border-left-width: 0;
        border-right-color: @arrow-color;
    }
}

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

.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: 0;
        > .arrow {
            display: none;
        }
    }
    &.tooltip {
        margin: 0;
        > .tooltip-arrow {
            display: none;
        }
    }
}

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

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

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