Angular - 换行时的工具提示答案

【问题标题】：Angular - tooltip when line breaksAngular - 换行时的工具提示
【发布时间】：2016-04-01 21:46:42
【问题描述】：

我正在尝试创建具有以下功能的指令：

当换行符（在 div 中没有更多位置）时，将创建一个工具提示（包含全文），文本将被剪切并替换为 3 个点。

到目前为止我发现的所有内容都是多行的，我得到的最好的是：

css:

.trim-info {
    max-width: 50px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 15px;
    position: relative;
}

模板：

'<div class="trim-info" uib-tooltip="{{lineCtrl.text}}">{{lineCtrl.text}}</div>'

但是，正如您所见，宽度是硬编码的。我的问题是如何使它动态地达到父宽度。

【问题讨论】：

什么是硬编码的？你已经在那里使用了范围变量..
宽度是硬编码的，设置为50像素
你应该不需要硬编码宽度，工具提示通常继承父 div 宽度
如果我不设置宽度，将不会有 3 个点，所有文本都将可见。工具提示不是这里的问题
我很乐意为指令提供帮助，但我确实想指出这种工具提示可以在纯 CSS 中完成。它不需要指令。 Google 搜索“CSS 工具提示”或“纯 CSS 工具提示”会产生很多结果。

标签： html css angularjs

【解决方案1】：

在css中你可以做

.parent-div {
    display: flex;
}

.text-div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
    min-width: 0;
}

在你的指令中你可以检查

angular.module('myApp').directive('tooltip', function() {
    function isEllipsisActive(e) {
         return (e.offsetWidth < e.scrollWidth);
    }
    return {
        restrict: 'E',
        link: function(scope, el, attr) { 
          var addTooltip = isEllipsisActive(el);
        }
    };
}

然后根据这个值启用工具提示。

【讨论】：

【解决方案2】：

这是一个非常简单的方法，可以用一些 jQuery 来完成。样式由您决定:)

$('.tooltip-bottom').each(function() {
  var after = $(this).clone();
  after.removeClass('tooltip-bottom')
       .removeClass('small')
       .addClass('tooltip')
       .css({"position": "absolute",
             "top": ($(this).position().top + $(this).height() ) + "px",
             "left": $(this).position().left + "px"});
  
  $('.MyContainer').append(after);
});

.small {
  width: 50px;
  height: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tooltip {
  display: none;
  transition: all 0.5s;
}
.small:hover ~ .tooltip {
  display: block;
  overflow-x: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="MyContainer">
  <div class="small tooltip-bottom">this is a very small div</div>
</div>

【讨论】：