Bootstrap 3 Tooltip removes image padding

Question

I have a sequence of img tags with Bootstrap 3 tooltips appearing over them on hover. When you hover over them, the tooltip appears but the image padding is removed and strings them all together; see first and second screenshot:

Here is my code:

<img src="//minotar.net/helm/pommmes/32" data-toggle="tooltip" tabindex="50" data-placement="top" title="pommmes" />
<img src="//minotar.net/helm/kittycaitie/32" data-toggle="tooltip" tabindex="50" data-placement="top" title="kittycaitie" />
<img src="//minotar.net/helm/1stBoss11111/32" data-toggle="tooltip" tabindex="50" data-placement="top" title="1stBoss11111" />
<img src="//minotar.net/helm/iGalaxHD/32" data-toggle="tooltip" tabindex="50" data-placement="top" title="iGalaxHD" />
<img src="//minotar.net/helm/liamflaherty63/32" data-toggle="tooltip" tabindex="50" data-placement="top" title="liamflaherty63" />
<img src="//minotar.net/helm/Fields/32" data-toggle="tooltip" tabindex="50" data-placement="top" title="Fields" />
<img src="//minotar.net/helm/MarkoGameZ/32" data-toggle="tooltip" tabindex="50" data-placement="top" title="MarkoGameZ" />
<script>
    $(function(){
        $('[data-toggle=tooltip]').tooltip({
            trigger: 'hover'
        }) 
    });
</script>

Answer 1

Looks like this is webkit rendering issue. Original markup you are using contains inline elements and looks roughly like this:

<img src="//minotar.net/helm/pommmes/32" data-toggle="tooltip" tabindex="50" data-placement="top" title="pommmes" />
<img src="//minotar.net/helm/kittycaitie/32" data-toggle="tooltip" tabindex="50" data-placement="top" title="kittycaitie" />
<img src="//minotar.net/helm/1stBoss11111/32" data-toggle="tooltip" tabindex="50" data-placement="top" title="1stBoss11111" />

Since img are inline elements by default browser respects whitespaces between them, including newlines. Those whitespaces are rendered as initial margin between images. This is what you consider "normal".

What happens when you hover over image is that the image gets wrapped into div container, this is how Bootstrap displays toolstips, since it can't append tooltip element into img it creates wrapper container to put tooltip there temporarily.

However div inserted between two inline elements breaks previous whitespace rendering and for some reason it's not reverted back when wrapper is removed.

The simplest fix is to init tooltips like this:

$(function() {
    $('[data-toggle=tooltip]').tooltip({
        trigger: 'hover',
        container: 'body'
    })
});

which dictates Bootsrap to append tooltips to body container instead of hovered element.

In the demo below, try to comment out container: 'body' and see how buggy behavior is back.

Demo: http://plnkr.co/edit/4bTvaKzP1qY1CRs3q0OK?p=preview