Angularjs display object or model data as tooltip on list items Angularjs small tooltip:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<li ng-repeat="item in items" >
<a rel="tooltip" tooltip="item.tooltip">{{item.name}}</a>
</li>
</div>
</div>
<script>
var myApp = angular.module("myApp", []);
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!"} ];
console.log("MyCtrl");
}
myApp.directive('tooltip', function () {
return {
restrict:'A',
link: function(scope, element, attrs)
{
$(element)
.attr('title',scope.$eval(attrs.tooltip))
.tooltip({placement: "right"});
}
}
})
</script>
</body>
</html>
output:
onmouseover list item display the tooltip
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<li ng-repeat="item in items" >
<a rel="tooltip" tooltip="item.tooltip">{{item.name}}</a>
</li>
</div>
</div>
<script>
var myApp = angular.module("myApp", []);
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!"} ];
console.log("MyCtrl");
}
myApp.directive('tooltip', function () {
return {
restrict:'A',
link: function(scope, element, attrs)
{
$(element)
.attr('title',scope.$eval(attrs.tooltip))
.tooltip({placement: "right"});
}
}
})
</script>
</body>
</html>
output:
onmouseover list item display the tooltip
No comments:
Post a Comment