HTML
<!DOCTYPE html>
<body ng-cloak ng-app="MyApp">
<md-content layout="row">
<p flex>
<text-ellipsis-tooltip text="abcdefghijklmnopqrstuvwxyz"></text-ellipsis-tooltip>
</p>
<p flex>
<text-ellipsis-tooltip text="abcdefghijklmnopqrstuvwxyz" text-length="10"></text-ellipsis-tooltip>
</p>
<p flex>
<a href="https://www.google.com" target="_blank">
<text-ellipsis-tooltip text="hyperlink asdasdasdasd" text-length="15" tooltip="right"></text-ellipsis-tooltip>
</a>
</p>
</md-content>
</body>
JAVASCRIPT
(function () {
'use strict';
angular
.module('MyApp', ['ngMaterial'])
.component('textEllipsisTooltip', {
template: [
'<span>{{$ctrl.displayText}}</span>',
'<md-button aria-label="{{::$ctrl.fullText}}" class="md-icon-button" ng-click="$ctrl.click($event)" ng-if="$ctrl.showTooltip">',
'<md-tooltip class="text-tooltip" md-delay="300" md-direction="{{::$ctrl.tooltip}}">',
'{{::$ctrl.fullText}}',
'</md-tooltip>',
'<md-icon>more_horiz</md-icon>',
'</md-button>'
].join(''),
bindings: {
textLength: '@',
text: '@',
tooltip: '@'
},
controller: function() {
this.$onInit = function() {
var length = parseInt(this.textLength || 0) || 30,
text = this.text || '';
if (text && text.length > length) {
this.displayText = text.substring(0, length);
this.fullText = text;
this.showTooltip = true;
} else {
this.displayText = text;
}
};
this.click = function(e) {
e.preventDefault();
e.stopPropagation();
};
}
});
})();
