Put column text in tooltip if its too long in angular view

Question

Put column text in tooltip if its too long in angular view

I have in my htm page a table with columns using AngularJs.

I want to put the text in tooltip if the text in column is more than 8 characters

this is my column :

<td>
<i class="column3">
    {{stoneEntity.StoneProperties.StockId}}
</i>
</td>

javascript
html
angularjs

Answer 1

Use a directive like this:

app.directive('showTooltip', function() {
    var MAX_SIZE = 8;
    return {
        restrict: 'A',
        scope: { label: '=showTooltip' },
        link: function (scope, element, attrs) {                        
            if ((scope.label || '').length > MAX_SIZE) {                
                element.text(scope.label.substring(0, MAX_SIZE));
                element.attr('title', scope.label);                
            } else {
                element.text(scope.label);
            }
        }
    }
});

Note: For the sake of simplicity, the MAX_SIZE is being defined inside the directive but you can change it and receive the max size as a parameter.

jsFiddle: http://jsfiddle.net/bmleite/h5Np6/