Search code examples
cssangular-ui-bootstrappopover

How to get ui-bootstrap popover to behave in float?

When I put an angularjs ui-bootstrap popover on a button that uses css to float, the popover gets confused about where to display itself and how much room it has.

Here's a very simple plunker that illustrates one such example. Notice that it's trying to display itself right on top of the button, and so flickers in and out. 

<button class="btn" style="float:right"
  popover="A longer popover text illustrates the problem more clearly" 
  popover-trigger="mouseenter" popover-placement="left">
    Button Text
</button>

There are problems with any placement, all stemming from varying miscalculations of where to actually display the popover.

Does anyone know how to overcome this?

Solution

  • The first step involves setting a fixed width for .tooltip and .tooltip-inner e.g.,

    .btn + .tooltip {
  width: 200px;
}

.btn + .tooltip > .tooltip-inner {
  width: 190px;
}

    (See https://github.com/angular-ui/bootstrap/issues/5746#issuecomment-362915139.)

    In addition, for this fix to work you need to upgrade uib-bootstrap to at least v0.12.1

    Plunker