Tooltip on Button in btn-group show/hide infinite loop and locking events

[Arkiliknam]

Bug description:

The issue is, when a button element inside a btn-group has a uib-tooltip and position is set to top (top-left also seems to cause the issue), when mousing over from the top edge of the button, the tooltip is triggered and hidden infinitely, locking the button and causing a bad visual experience. This only started to occur post migration to the uib prefix. It seems to be caused by a combination of the size of text in the button and the size of the text in the tooltip. Usage in this way to achieve a tooltip on a dropdown button.

It's most noticeable in Firefox. IE and Chrome seem to exit of the infinite loop, though the tooltip will either disappear or mouse move will trigger the show/hide loop.

Link to minimally-working plunker that reproduces the issue:

http://embed.plnkr.co/HbDMwCpv1Ijf6lgLQbIQ/

Version of Angular, UIBS, and Bootstrap

Angular: 1.5.3
UIBS: 1.3.2
Bootstrap: 3.3.6

[RobJacobs]

Add the uib-tooltip directive to the btn-group element instead. The btn-group-vertical class adds css that doesn't allow the tooltip to grow horizontally, so the text wraps and throws off the vertical positioning.

[Arkiliknam]

I can do that for this scenario, but what about if we have a btn-group of different buttons and all require a unique tooltip?

[Arkiliknam]

Ah, this looks like a well trodden path. It came down to the classic bootstrap tooltip in btn-group issues (as seen here (#139)) uibTooltipProvider allows you to fix with:

$uibTooltipProvider.options({ appendToBody: true });

I'm not entirely sure what knock-on effects doing this on my entire angular module will have.

[icfantv]

Closing as a support issue.

[Arkiliknam]

@icfantv perhaps it worthwhile updating the documentation for all controls using button groups and mentioning this as a fix (as bootstrap mention their specific fix to the same issue in their documentation).

[icfantv]

@Arkiliknam, happy to consider that. Can you please link in that documentation reference? Thanks.

[Arkiliknam]

@icfantv, sure. It's found here: http://getbootstrap.com/components/#btn-groups

Tooltips & popovers in button groups require special setting

When using tooltips or popovers on elements within a .btn-group, you'll have to specify the option container: 'body' to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).