JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.4.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div ng-app="someApp"
ng-controller="MainCtrl"
class="likes"
tooltip="show favorites"
tooltip-trigger="mouseenter"
ng-click="doSomething()">{{likes}}</div>
CSS
.tooltip {
z-index: 2000;
background:#000;
}
.likes{
float:left;
margin:100px;
padding: 10px;
border: 1px solid black;
}
JavaScript
var app = angular.module('someApp', ['ui.bootstrap']);
app.config(['$tooltipProvider', function($tooltipProvider){
$tooltipProvider.setTriggers({
'mouseenter': 'mouseleave',
'click': 'click',
'focus': 'blur',
'hideonclick': 'click'
});
}]);
app.controller('MainCtrl', function ($scope) {
$scope.likes = 999;
$scope.doSomething = function(){
//hide the tooltip
$scope.tt_isOpen = false;
};
})