टूलटिप केवल तभी दिखाएं जब टेक्स्ट को कोणीय यूआई बूटस्ट्रैप निर्देश

Question

में छोटा कर दिया गया हो, मैं पाठ को छोटा होने पर केवल कोणीय यूआई बूटस्ट्रैप टूलटिप दिखाना चाहता हूं। मैं कस्टम निर्देश के साथ नीचे कोड

<div tooltip="{{value}}" tooltip-append-to-body="true" enable-truncate-tooltip>{{value}}</div> 

.directive("enableTruncateTooltip", function() { 
    return { 
    restrict: 'A', 
    link: function (scope, elem, attr) { 
     elem.bind('mouseenter', function() { 
     var $this = angular.element(this); 

     if (this.offsetWidth >= this.scrollWidth) { 
      angular.element('.tooltip').attr('hide-tooltip', true); 
     } 
     }); 
    } 
    } 
}) 

यह कोणीय-ui-बूटस्ट्रैप संस्करण 0.12.1 में ठीक काम करता है की कोशिश की। लेकिन बाद के संस्करण इसका समर्थन नहीं कर रहे हैं।

मैं कोणीय-UI-बूटस्ट्रैप के नवीनतम संस्करण में यह वही कार्यक्षमता कैसे प्राप्त कर सकता हूं?

आपकी मदद के लिए अग्रिम धन्यवाद।

Answer 1

टी एल; डॉ: Plunker Demo (using $watch) Old demo (using $timeout)

(जवाब एक सुझाव टिप्पणी Michael Mish Kisilenko के लिए $ धन्यवाद का उपयोग करने के लिए $ टाइमआउट के बजाय घड़ी, प्रतिबिंबित करने के लिए अद्यतन किया गया था!) ​​

सबसे पहले , (उपसर्ग 'uib-' के साथ) अद्यतन लोगों को अपने कोणीय-ui निर्देशों को बदलने:

<div uib-tooltip="{{value}}" show-tooltip-on-text-over-flow tooltip-enable="false">{{value}}</div> 

और n निम्नलिखित निर्देश है, जो गतिशील रूप से कोणीय-ui प्रदान की बदल जाता है का उपयोग करें सुविधा tooltip-enable (ध्यान दें कि आप के साथ निर्देश tooltip-enable="false" तो टूलटिप अगर पाठ छोटा कर दिया नहीं है अक्षम हो जाएगा तत्व को प्रारंभ करना चाहिए:

myApp.directive("showTooltipOnTextOverflow", ["$timeout", function($timeout) { 
    return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     var el = element[0]; 
     scope.$watch(function(){ 
     return el.scrollWidth; 
     }, function() { 
     var el = element[0]; 
     if (el.offsetWidth < el.scrollWidth) { 
      //console.log('ellipsis is active for element', element); 
      attrs.tooltipEnable = "true"; 
     } else { 
      //console.log('ellipsis is NOT active for element', element); 
     } 
     }); 
     /*$timeout(function() { 
     var el = element[0]; 
     if (el.offsetWidth < el.scrollWidth) { 
      //console.log('ellipsis is active for element', element); 
      attrs.tooltipEnable = "true"; 
     } else { 
      //console.log('ellipsis is NOT active for element', element); 
     } 
     });*/ 
    } 
    }; 
}]); 

काट-छांट करने के लिए पाठ मैं सादा सीएसएस का उपयोग करूंगा:

span.truncated { 
    width: 400px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

Answer 2

लुलु द्वारा पोस्ट किए गए उत्तर में उल्लिखित घड़ी का उपयोग प्रदर्शन को नीचे लाएगा। यह इतने सारे दर्शक जोड़ देगा क्योंकि कई कोशिका ग्रिड हैं और इन्हें प्रत्येक पाचन चक्र में मूल्यांकन किया जाता है।

मैं माउसओवर दृष्टिकोण का उपयोग करने के लिए अपने कोड को संशोधित किया - तो टूलटिप की जरूरत केवल विशेष कक्ष पर माउसओवर स्थिति में मूल्यांकन किया जाता है:

myApp.directive("showTooltipOnTextOverflow", ["$timeout", function($timeout) { 
    return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     var el = element[0]; 

     if (angular.isObject(el)) { 
     var evaluateTooltip = (event: JQueryEventObject, isOurEvent: boolean) => { 
     // evaluate whether to enable tooltip 
     attrs.tooltipEnable = el.offsetWidth < el.scrollWidth ? "true" : "false"; 

     if (isOurEvent !== true && attrs.tooltipEnable === "true") { 
      // tooltip should be enabled, trigger mouseover again to trigger tooltip (current mouseover is already handled by tooltip with false value) 
      // and mark it as our event to avoid its handling here 
      element.trigger("mouseover", [true]); 

      // revert tooltip enabling back to false to cover case when mouseover happens and tooltip should not be enabled 
      scope.$applyAsync(() => { 
      attrs.tooltipEnable = "false"; 
     }); 
     } 
    }; 

    element.on("mouseover", evaluateTooltip); 

    element.on("$destroy",() => { 
     element.off("mouseover", evaluateTooltip); 
    }); 
    } 
});