Bootstrap 3-工具提示-按钮-填充消失

Question

I'm testing Bootstrap and I have a silly problem. When I use tooltips on several buttons (in the same row) at the begining all the buttons are separated by several pixels. When the tooltip appears then the space between the buttons dissapears.

My code:

<button type="button" class="btn btn-default" data-toggle="tooltip" id="btn01"
data-placement="top" title="Tooltip on top">Button with tooltip</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" id="btn02"
data-placement="left" title="Tooltip on left">Button with tooltip</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" id="btn03"
data-placement="right" title="Tooltip on right">Button with tooltip</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" id="btn04"
data-placement="bottom" title="Tooltip on bottom">Button with tooltip</button>

<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.js"></script>

<script type="text/javascript">
    $('document').ready(function() {
        $('#btn01').tooltip();
        $('#btn02').tooltip();
        $('#btn03').tooltip();
        $('#btn04').tooltip();
    });
</script>

Answer 1

Problem already solved adding inside the button tags ...

data-container="body"

By the way ... I still know nothing about JS. I'm learning. So I understand I could add for example the class clsTooltip to the 4 buttons and then ... ¿use this ...?

$('document').ready(function() {
    $('.clsTooltip').tooltip();
});

Thanks a lot!!