कोणीय - टूलटिप जब लाइन

Question

मैं निम्नलिखित functionalty साथ एक निर्देश बनाने के लिए कोशिश कर रहा हूँ टूट जाता है:

जब पंक्ति विराम (div में कोई और अधिक जगह) एक टूलटिप (पूरा पाठ के साथ) बनाया जाएगा और पाठ काटा जाएगा और 3 बिंदुओं द्वारा प्रतिस्थापित किया जाएगा।

सब कुछ मैं अब तक पाया बहु लाइन के लिए है, सबसे अच्छा मुझे मिल गया यह है:

सीएसएस:

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

लेकिन, जैसा कि आप देख सकते हैं चौड़ाई हार्डकोडेड है। मेरा सवाल यह है कि मैं इसे मूल चौड़ाई के लिए गतिशील कैसे बना सकता हूं।

Answer 1

सीएसएस में आप देख सकते हैं कि

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

और फिर यह मान टूलटिप सक्षम के आधार पर

.parent-div { 
    display: flex; 
} 

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

कर सकते हैं अपने निर्देश में।

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