Angular - tooltip when line breaks

Question

I am trying to create a directive with the following functionalty:

when the line breaks (no more place in the div) a tooltip will be created (with the full text) and the text will get cut and replaced by 3 dots.

everything i found so far is for multi line, the best i got is this:

css:

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

template:

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

But, as you can see the width is hardcoded. My question is how can I make it dynamcily to the parent width.

Answer 1

In css you can do

.parent-div {
    display: flex;
}

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

In your directive you can check

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

And then depending on this value enable tooltip.