Tooltip breaks Bootstrap Button Groups?

[NikBisht]

I would like to use Angular-tooltips with bootstrap buttons, but when I wrap each button with an Angular-tooltip, the button group breaks. I end up with individual buttons and broken styles. I then added the tooltip to the button tag itself to no avail. I also tried adding tooltip-append-to-body="true" also to no avail. How do we keep the button group styling with angular tooltip?

    <!-- Displaying primary buttons -->
    <button type="button" tooltips tooltip-template="tooltipText" tooltip-append-to-body="true" ng-repeat="button in primaryButtons" class="btn btn-default main-btn">{{button.title}}</button>
    <!-- Display dropdown -->
    <button type="button" class="btn btn-default dropdown-btn dropdown-toggle" role="menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li ng-repeat="button in secondaryButtons" role="menuitem"><a>{{button.title}}</a></li>
    </ul>
</div>`

[clizSec]

Happens to me too. Not only on bootstrap buttons.

[clizSec]

tooltip._multiline set to "display:block", changing it to inline-block or removing it solve the issue, but I didn't tested for any other issues regard that fix.

Add the following to your CSS code:

tooltip._multiline {
    display: inline-block !important;
}