Bootstrap tooltips with Angular only on truncated text

Question

Very similar to Show tooltip only when the text is truncated in angular UI bootstrap directive

I want tooltips to popup only for truncated text, and I want them to react to resizing. At least in the version of angular-ui I'm using in the project, the only attribute being observed is the tooltip attribute itself, so you can make something similar work with ng-attr:

https://plnkr.co/edit/aqZq0ySiHhssy9l9ggTB?p=preview

html:

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

js:

app.directive('checkOverflow', function() {
  return {
    restrict: 'A',
    link: function(scope, element) {
      function setOverflowFlag() {
        var visibleWidth = element[0].clientWidth,
            contentWidth = element[0].scrollWidth;
        scope.overflows = contentWidth > visibleWidth;
      }
      element.bind('mouseover', setOverflowFlag);
    }
  };
});

however, if you reduce the width of the html pane in the plunker to force ellipsis truncation, you'll notice that the tooltip doesn't appear on first hover, but does on the second one. Can anyone help with that last piece of the puzzle?

Answer 1

I suppose

app.directive('checkOverflow', function() {
  return {
  restrict: 'A',
  link: function(scope, element) {
      function setOverflowFlag() {
        var visibleWidth = element[0].clientWidth,
        contentWidth = element[0].scrollWidth;
        scope.overflows = contentWidth > visibleWidth;
      }
      element.bind('mouseover', setOverflowFlag);
      setOverflowFlag();
   }
 };
});