Bootstrap Tooltip left-placement problem

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<body>
    <div id="icons">
<i class="glyphicon glyphicon-exclamation-sign"></i>

<i class="glyphicon glyphicon-exclamation-sign"></i>

<i class="glyphicon glyphicon-exclamation-sign"></i>

<i class="glyphicon glyphicon-exclamation-sign"></i>

<i class="glyphicon glyphicon-exclamation-sign"></i>

<i class="glyphicon glyphicon-exclamation-sign"></i>

<i class="glyphicon glyphicon-exclamation-sign"></i>

<i class="glyphicon glyphicon-exclamation-sign"></i>

<i class="glyphicon glyphicon-exclamation-sign"></i>

<i class="glyphicon glyphicon-exclamation-sign"></i>

<i class="glyphicon glyphicon-exclamation-sign"></i>

<i class="glyphicon glyphicon-exclamation-sign"></i>

<i class="glyphicon glyphicon-exclamation-sign"></i>

    </div>
    <button class="btn">Switch Sides</button>
    <div id="dir"></div>
</body>

CSS

body {
    padding: 40px 20px;
}

i {
    font-size: 48px;
}
button {
    margin: 20px 0;
}

#dir {
    margin: 20px 6px;
}

JavaScript

/* ========================================================================
 * Bootstrap: tooltip.js v3.1.1
 * http://getbootstrap.com/javascript/#tooltip
 * Inspired by the original jQuery.tipsy by Jason Frame
 * ========================================================================
 * Copyright 2011-2014 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * ======================================================================== */


+function ($) {
  'use strict';

  // TOOLTIP PUBLIC CLASS DEFINITION
  // ===============================

  var Tooltip = function (element, options) {
    this.type       =
    this.options    =
    this.enabled    =
    this.timeout    =
    this.hoverState =
    this.$element   = null

    this.init('tooltip', element, options)
  }

  Tooltip.DEFAULTS = {
    animation: true,
    placement: 'top',
    selector: false,
    template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
    trigger: 'hover focus',
    title: '',
    delay: 0,
    html: false,
    container: false
  }

  Tooltip.prototype.init = function (type, element, options) {
    this.enabled  = true
    this.type     = type
    this.$element = $(element)
    this.options  = this.getOptions(options)

    var triggers = this.options.trigger.split(' ')

    for (var i = triggers.length; i--;) {
      var trigger = triggers[i]

      if (trigger == 'click') {
        this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
      } else if (trigger != 'manual') {
        var eventIn  = trigger == 'hover' ? 'mouseenter' : 'focusin'
        var eventOut = trigger == 'hover' ? 'mouseleave' : 'focusout'

        this.$element.on(eventIn  + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
        this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this))
      }
    }

    this.options.selector ?
...