<!DOCTYPE html>
<html ng-app="plunkerApp">
<head>
<script data-require="angular.js@1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
<script data-require="angular-animate@1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular-animate.js"></script>
<script data-require="angular.js@1.4.0" data-semver="1.4.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="script.js"></script>
</head>
<body>
<div class="box">
<span tooltip-is-open="isOpenFirst || false" tooltip="hello, this is the message!" data-ng-mouseenter="isOpenFirst = true" click-outside="isOpenFirst = false">Method with expression (not working)</span>
</div>
<div class="box">
<span ng-init="isOpen = false" tooltip="hello, this is the message!" tooltip-is-open="isOpen" data-ng-mouseenter="isOpen = true" click-outside="isOpen = false">Working method</span>
</div>
</body>
</html>
// Code goes here
angular.module('plunkerApp', [
'ui.bootstrap',
'ngAnimate',
'plunkerApp.directives'
])
.config(['$tooltipProvider', function($tooltipProvider){
$tooltipProvider.setTriggers({
'mouseenter': 'click',
'click': 'click',
'focus': 'blur',
'never': '' // <- This ensures the tooltip will go away on mouseleave
});
}]);
angular.module('plunkerApp.directives', [])
.directive('clickOutside', function($document) {
return {
restrict: 'A',
scope: {
clickOutside: '&'
},
link: function (scope, element) {
var handler = function(event) {
if (!element[0].contains(event.target)) {
scope.$apply(function () {
scope.clickOutside({ $event : event });
});
}
};
$document.on('click', handler);
scope.$on('$destroy', function() {
$document.off('click', handler);
});
}
};
});
/* Styles go here */
.box {
padding-top: 100px;
text-align: center;
}
.box span {
background-color: #ECECEC;
padding: 15px;
}