UIB Tooltip

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="jquery@1.7.2" data-semver="1.7.2" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script data-require="angular.js@1" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
    <script data-require="ui-bootstrap@*" data-semver="1.3.0" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-1.3.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.0/ui-bootstrap-tpls.js"></script>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
<div class="flexible-box">
      <div class="truncate" uib-tooltip="{{overflows? 'foobar' : undefined}}" check-overflow>
      Short text
      </div>

      <div class="truncate" uib-tooltip="{{overflows? 'foobar' : undefined}}" check-overflow>
      A bit longer text
      </div>
      <div class="truncate" uib-tooltip="{{overflows? 'foobar' : undefined}}" check-overflow>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
</div>
  </body>

</html>

// Code goes here
var app = angular.module('app', ['ui.bootstrap']);

app.directive('checkOverflow', ['$timeout', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element) {
      var checked = false;
      
      function setOverflowFlag(event) {
        scope.$applyAsync(function() {
          if(checked) {
            checked = false;
            return;
          }
          
          var visibleWidth = element[0].clientWidth,
            contentWidth = element[0].scrollWidth;
          scope.overflows = contentWidth > visibleWidth;
          
          if(scope.overflows) {
            $timeout(function() {
              checked = true;
              element.triggerHandler('mouseenter', event);
            });
          }
        });
      }
      
      element.bind('mouseenter', setOverflowFlag);
    }
  };
}]);

/* Styles go here */
.truncate {
  min-width: 150px;
  height: 40px;
  margin-top: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flexible-box {
			display: block;
			border: 1px solid black;
			white-space: nowrap;
			width: 70px;
			overflow: hidden;
			text-overflow: ellipsis;
			resize: both;
}

### Bug description:
Tooltip flickering and wrong positioned when inside of a right aligned (text) element