Bootstrap Tooltip

by Zaiste

HTML

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div ng-app="app">
    <div ng-controller="MyCtrl">
        <li ng-repeat="item in items" >
            <a title="item.tooltip" tooltip>{{item.name}}</a>
        </li>
    </div>
</div>

JavaScript

var app = angular.module("app", []);

function MyCtrl($scope) {
    $scope.items = [{ name: "item 01", tooltip: "This is item 01 tooltip!"},
                    { name: "item 02", tooltip: "This is item 02 tooltip!"},
                    { name: "item 03", tooltip: "This is item 03 tooltip!"},
                    { name: "item 04", tooltip: "This is item 04 tooltip!"},
                    { name: "item 05", tooltip: "This is item 05 tooltip!"} ];
}

app.directive('tooltip', function () {
    return {
        restrict:'A',
        link: function(scope, element, attrs)
        {
            $(element)

                .tooltip({placement: "right"});
        }
    }
})