Bootstrap 3.2.0 transform-scale tooltip bug

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether-drop/1.4.0/js/drop.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether-tooltip/1.1.0/js/tooltip.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tether-tooltip/1.1.0/css/tooltip-theme-arrows.min.css">
<main>
    <button class="btn" data-toggle="tooltip">Hover over me</button>
    <button class="btn" data-toggle="tooltip">Hover over me</button>    
    <button class="btn" data-toggle="tooltip">Hover over me</button>    
    <button class="btn" data-toggle="tooltip">Hover over me</button>
    <button class="btn" data-toggle="tooltip">Hover over me</button>
</main>

CSS

main {
    margin-top: 100px;
    margin-left: 50px;
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform-origin: top left;
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -o-transform-origin: top left;
}

JavaScript

var tips = $('[data-toggle="tooltip"]').map(function (_, tgt) {
    new Tooltip({
		target: tgt,
        content: "My awesome <b>content</b>.",
		position: 'top center',
		openOn: 'hover'
	});
});