仅当文本在角度 UI 引导指令中被截断时才显示工具提示答案

【问题标题】：Show tooltip only when the text is truncated in angular UI bootstrap directive仅当文本在角度 UI 引导指令中被截断时才显示工具提示
【发布时间】：2016-02-09 15:37:16
【问题描述】：

我只想在文本被截断时显示角度 UI 引导工具提示。我用自定义指令尝试了下面的代码

<div tooltip="{{value}}" tooltip-append-to-body="true" enable-truncate-tooltip>{{value}}</div>

.directive("enableTruncateTooltip", function () {
  return {
    restrict: 'A',
    link: function (scope, elem, attr) {
      elem.bind('mouseenter', function () {
        var $this = angular.element(this);

        if (this.offsetWidth >= this.scrollWidth) {
          angular.element('.tooltip').attr('hide-tooltip', true);
        }
      });
    }
  }
})

它在 angular-ui-bootstrap 版本 0.12.1 中运行良好。但后来的版本不支持这一点。

如何在最新版本的 angular-ui-bootstrap 中实现同样的功能？

提前感谢您的帮助。

【问题讨论】：

标签： angularjs tooltip angular-ui-bootstrap

【解决方案1】：

TL;DR：Plunker Demo (using $watch)~~Old demo (using $timeout)~~

（答案已更新以反映使用 $watch 而不是 $timeout 的建议，感谢Michael Mish Kisilenko的评论！）

首先，将 angular-ui 指令更改为更新后的指令（前缀为 'uib-'）：

<div uib-tooltip="{{value}}" show-tooltip-on-text-over-flow tooltip-enable="false">{{value}}</div>

然后使用以下指令，它会动态更改 angular-ui 提供的功能 tooltip-enable（请注意，您应该使用指令 tooltip-enable="false" 初始化元素，因此如果文本没有被截断，工具提示将被禁用：

myApp.directive("showTooltipOnTextOverflow", ["$timeout", function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var el = element[0];
      scope.$watch(function(){
        return el.scrollWidth;
      }, function() {
        var el = element[0];
        if (el.offsetWidth < el.scrollWidth) {
          //console.log('ellipsis is active for element', element);
          attrs.tooltipEnable = "true";
        } else {
          //console.log('ellipsis is NOT active for element', element);
        }
      });
      /*$timeout(function() {
        var el = element[0];
        if (el.offsetWidth < el.scrollWidth) {
          //console.log('ellipsis is active for element', element);
          attrs.tooltipEnable = "true";
        } else {
          //console.log('ellipsis is NOT active for element', element);
        }
      });*/
    }
  };
}]);

为了截断文本，我将使用纯 CSS：

span.truncated {
    width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

【讨论】：

一个更好、更灵活的解决方案可能会放松“超时”并使用范围。$监视元素的滚动宽度
@MichaelMishKisilenko 解决方案是完美的，只是不要忘记以正确的方式使用它与property
@Sathya：我们需要实现同样的事情。我们正在使用单元格模板，并且首先无法显示“uib-tooltip”。 “uib-tooltip”是否与 celltemplate 不兼容，或者您有任何解决方法吗？
在“cell”中，您实际上是指手机（即手机）吗？
嗨@Lulu：不，我所说的 celltemplate 是指 html 模板（外部 html 文件），它用于在 Angular ui-grid 数据表中显示单元格内容 - link。 Celltemplate 是此列中每个单元格的自定义模板。我们正在尝试使用单元格模板中的“uib-tooltip”，

【解决方案2】：

使用 Lulu 发布的答案中提到的手表会降低性能。它将添加与网格网格一样多的观察者，并在每个摘要周期中对这些观察者进行评估。

我修改了他的代码以使用鼠标悬停方法 - 因此仅在特定单元格的鼠标悬停事件中评估工具提示的需要：

myApp.directive("showTooltipOnTextOverflow", ["$timeout", function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var el = element[0];

      if (angular.isObject(el)) {
        var evaluateTooltip = (event: JQueryEventObject, isOurEvent: boolean) => {
        // evaluate whether to enable tooltip
        attrs.tooltipEnable = el.offsetWidth < el.scrollWidth ? "true" : "false";

        if (isOurEvent !== true && attrs.tooltipEnable === "true") {
          // tooltip should be enabled, trigger mouseover again to trigger tooltip (current mouseover is already handled by tooltip with false value)
          // and mark it as our event to avoid its handling here
          element.trigger("mouseover", [true]);

          // revert tooltip enabling back to false to cover case when mouseover happens and tooltip should not be enabled
          scope.$applyAsync(() => {
          attrs.tooltipEnable = "false";
        });
      }
    };

    element.on("mouseover", evaluateTooltip);

    element.on("$destroy", () => {
      element.off("mouseover", evaluateTooltip);
    });
  }
});

【讨论】：