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

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

1 个答案: