JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script data-semver="3.0.3" src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myController" class="lowerdown">
<a target="_self" class="count" hover:popover ng-model="myModel">Info</a>
</div>
</div>
CSS
.lowerdown{
margin-top:50px;
}
JavaScript
angular.module('myAppControllers', []);
var app = angular.module('myApp', ['myAppControllers'])
.directive('hoverPopover', function ($compile, $templateCache, $timeout, $rootScope) {
var getTemplate = function () {
return $templateCache.get('popoverTemplate.html');
};
return {
restrict: 'A',
require: 'ngModel',
scope:{
ngModel: '='
},
controller: function ($scope, $element) {
$scope.attachEvents = function (element) {
$('.popover').on('mouseenter', function () {
$rootScope.insidePopover = true;
});
$('.popover').on('mouseleave', function () {
$rootScope.insidePopover = false;
$(element).popover('hide');
});
$('.popover').on('mouseclick', function () {
$rootScope.insidePopover = false;
$(element).popover('hide');
});
};
},
link: function (scope, element, attrs) {
scope.$watch(function () { return scope.ngModel }, function () {
var content = getTemplate();
$rootScope.insidePopover = false;
scope.encodeURL = function (url) {
var urlWithNoExtraParams = url;
var urlParts = urlWithNoExtraParams.split('?');
var bqPart;
//var saleHeader;
for (var i in urlParts) {
if (urlParts[i].indexOf('bq') != -1)
bqPart = urlParts[i];
}
bqPart = bqPart.split('=')[1];
var bqItems = bqPart.split('|');
var encodedBqItems = [];
for (var i in bqItems) {
var tmp = bqItems[i].split(':');
var encodedTmp = tmp[0] + ':';
...