 <p>you can use the <code>title</code> property</p> <pre><code>&lt;p class="hover" title="{{item.name}}"&gt; </code></pre> <p>or if you what to use angular for it and not the tooltip</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('app', []) .controller('myController', function($scope) { $scope.myText = "some very very very very very long text"; }) .directive('hoverText', function () { return { restrict: 'A', scope: { hoverText: '=', maxChars: '=' }, link: function (scope, element) { element.text(scope.hoverText.substr(0, scope.maxChars) + '...') element.on('mouseenter', function() { element.text(scope.hoverText); }); element.on('mouseleave', function() { element.text(scope.hoverText.substr(0, scope.maxChars) + '...'); }); } }; })</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>p</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt; &lt;div ng-app="app" ng-controller="myController"&gt; &lt;p hover-text="myText" max-chars="20"&gt; &lt;/p&gt; &lt;/div&gt;</code></pre> </div> </div> </p>