How to prevent uib-carousel from clipping uib-popover?

Question

I've got a little widget with a popover, and the same widgets inserted into a carousel.

For some reason, while the popover ignores its container boundaries inside a div, it is clipped when inside the carousel.

Here's what I mean: (The top version thing is the widget in a containing div, no clipping.

This one show the popover constrained by the size of carousel.

Wondering if there is something I can add to the .css so it doesn't clip the popover when its inside a carousel?

var app = angular.module('app', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('app').config(function() {
  angular.lowercase = function(text) {
    (text || '').toLowerCase();
  }
});

class TestController {
  constructor($scope) {
    $scope.slides = [];
    $scope.foo = "I am Test Controller ";
    $scope.currIndex = 0;
    console.log("test controller instantiating");
    $scope.slides.push({
      id: 0,
      val: "one"
    });
    $scope.slides.push({
      id: 1,
      val: "two"
    })
    $scope.slides.push({
      id: 2,
      val: "three"
    });
  }
  $onInit() {
    console.log("TestController onInit ");
  }
}

app.controller("TestController", ['$scope', TestController]);

.test-container {
  width: 140px;
  height: 75px;
  padding: 1%;
  background-color: green;
}

.carousel-container {
  width: 140px;
}

.test-carousel {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  background-color: lightgreen;
}

.page {
  margin-left: 30px;
  margin-top: 30px;
}

.red-square {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  margin-bottom: 60px;
  margin-left: 50px;
  height: 50px;
  width: 50px;
  background-color: red;
}

.blue-dot {
  height: 20px;
  width: 20px;
  background-color: blue;
  border-radius: 50%;
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-sanitize.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="page">
  <div ng-app="app">
    <div class="test-container">
      <div class="red-square">
        <div class="blue-dot" uib-popover="I'm a poppover!" popover-trigger="'mouseenter'"></div>
      </div>
    </div>
    <br />

    <div ng-controller="TestController" class=carousel-container>
      <div uib-carousel="" active="active" class="test-carousel" interval="0" no-wrap="noWrapSlides">
        <div uib-slide="" ng-repeat="slide in slides track by slide.id" active="active" index="slide.id">
          <div class="red-square">
            <div class="blue-dot" uib-popover="I'm a popover!" popover-trigger="'mouseenter'"></div>
          </div>
        </div>
      </div>
    </div>
    <br />

  </div>
</div>

Answer 1

Well it turns out RTFM would have been good advice in this case.

If you add popover-append-to-body=true to the element that contains the uib-popover attribute the problem goes away.