Angular - line break tooltip

Question

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

when the line breaks (no more space in the div), a tooltip will be created (with full text), and the text will be cropped and replaced with 3 dots.

all i have found so far, for a multi-line line, the best i got is:

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>' 

But, as you can see, the width is hard-coded. My question is how can I do this dynamically with the width of the parent.

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 the tooltip.

Answer 2

Here is a very simple way to do this with some jQuery. The design 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>