仅在截断文本上使用 Angular 的引导工具提示

Question

非常类似于Show tooltip only when the text is truncated in angular UI bootstrap directive

我希望仅针对截断的文本弹出工具提示，并且我希望它们对调整大小做出反应。至少在我在项目中使用的 angular-ui 版本中，唯一观察到的属性是 tooltip 属性本身，因此您可以使用 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);
    }
  };
});

但是，如果您在 plunker 中减小 html 窗格的宽度以强制截断省略号，您会注意到工具提示不会出现在第一次悬停时，但会出现在第二次悬停时。谁能帮忙解决最后一个难题？

Answer 1

我想

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();
   }
 };
});