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="{{{true: 'mouseenter', false: 'hideonclick'}[showTooltip]}}" ng-click="doSomething()">{{likes}}</div>

CSS

.tooltip {
    z-index: 2000;
    background:#000;
}

.likes{
    float:left;
    margin:100px;
}

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.showTooltip = true;
    $scope.likes = 999;
    
    $scope.doSomething = function(){
        //hide the tooltip
        $scope.showTooltip = !$scope.showTooltip;                                   
    };
    
                                     
                                     
})