PBGUX/pb-design-system

Issues with btn-group and tooltip

ldaug opened this issue · 1 comments

ldaug commented

If you have a tooltip on the last button in a btn-group and hover so the tooltip is displayed the rounded corners go away.

No tooltip:
image

Tooltip:
image

<div class="btn-group"> <button id="undoButton" class="btn btn-default" ng-click="ctrl.undo()" ng-disabled="!ctrl.canUndo" uib-tooltip="{{'hub.canvas.menu.undo' | translate}}" tooltip-placement="bottom" tooltip-trigger="'focus blur mouseenter mouseleave'"> <i class="nc-icon-mini arrows-2_corner-left-round"></i> </button> `` <button id="redoButton" class="btn btn-default" ng-click="ctrl.redo()" ng-disabled="!ctrl.canRedo" uib-tooltip="{{'hub.canvas.menu.redo' | translate}}" tooltip-placement="bottom" tooltip-trigger="'focus blur mouseenter mouseleave'"> <i class="nc-icon-mini arrows-2_corner-right-round"></i> </button> </div>

Note I had issues inserting the html, but it should all be there.

Try using tooltip-append-to-body on the element with the tooltip

See https://angular-ui.github.io/bootstrap/#!#tooltip for details.