Angular - tooltip when line breaks - html

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.

Answer 2

Here is a realy simple way to do it with some jQuery.
The styling is up to you :)
$('.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>