Bootstrap Tooltip left-placement problem

by Yuval Bar-On

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

(function ($) {
    var lorem = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias delectus magni expedita neque voluptatibus nemo dolorem et numquam facere vero doloremque officia excepturi non. Labore tempora vero eos atque nemo!';

    var placement = 'left';

    function addTooltip() {
        $('#dir').text('placement: ' + placement);
        $('i').tooltip({
            title: lorem,
            placement: placement
        });
    }

    addTooltip();

    $('button').on('click', function () {
        placement = (placement == 'left') ? 'right' : 'left';

        $('i').tooltip('destroy');
        addTooltip();
    });
})(jQuery);