JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-12">
             <button type="button" class="btn btn-default" placement="bottom"
                    popover2="On the bottom!">Open</button>
       
        </div>       
    </div> 
     <div class="row">
    </div>        
    <div class="row">
        <div class="col-md-12">
             <button popover-placement="bottom" popover="On the bottom!" class="btn btn-default">Top</button>
        </div>
    </div>
</div>

<script type="text/ng-template" id="views/popover/popover-html-unsafe-popup.html"><div class="popover {{placement}}" ng-class="{ in: isOpen, fade: animation() }" >
  <div class="arrow"></div>

  <div class="popover-inner">
    <h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
    <div class="popover-content" bind-html-unsafe="content">
    </div>
    <button type="button" class="close" ng-click="setOpen(false)">&times;</button>
  </div>
</div>
</script>

JavaScript

var app = angular.module('app',[,'ui.bootstrap.tpls', 'ui.bootstrap.tooltip', 'ui.bootstrap.datepicker', 'ui.bootstrap.popover'])
.controller('MainController', ['$scope','$window','$log',
    function ($scope,$window,$log) {
        var open = false;
    }
])
.directive('popover2',['$parse', '$compile','$log','$templateCache','$position',
    function ($parse,$compile,$log,$templateCache,$position ) {
         function link(scope, element, attrs) {
             var popupScope = scope.$new(false);   
             var html = $templateCache.get('views/popover/popover-html-unsafe-popup.html').trim();
             var template = angular.element(html)
             
             var popupLinkFn = $compile(template);
             
             var popup = popupLinkFn(popupScope);
             
             popupScope.isOpen = false;             
             popupScope.content = attrs['popover2'];
             var position = function(){
                 var ttPosition = $position.positionElements(element, popup, scope.placement, false);
                 ttPosition.top += 'px';
                 ttPosition.left +='px';
                 popup.css(ttPosition);
             };
             popupScope.setOpen = function(val) {                 
                 
                 popupScope.isOpen = val;
                 popup.css({display: popupScope.isOpen ? 'block' :'none' });       
                 position();
                 // call twice, same as tooltip.js
                 position();
                 
             };            
            
             var cleanup = element.on('click',function(event){   
                popupScope.setOpen(!popupScope.isOpen);
             });
             
             element.after(popup);
             element.on('$destroy',cleanup);
             
         }
        return {
            replace:false,            
            link:link,
            scope: {title: "@", placement: "@",},
        }; 
    }
 ]);