JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">Enter the popup data:
    <input type='text' ng-model='popupData' />
    <div class="test" pop-over="popupTemplate" po-data="popupData">
         <h1>Click me and see my popover</h1>
    </div>
</div>

CSS

.test {
    margin-top: 100px;
}

JavaScript

angular.module('app', []).
controller('ctrl', function ($scope, $sce) {
    $scope.popupTemplate = '<div>this is my popup data: {{popupData}}</div>';
    $scope.popupData = '';
}).directive('popOver', function (popOverService) {
    return {
        scope: {
            popupData: '=poData',
            popupTemplate: '=popOver'
        },
        link: function (scope, elem, attr) {
            elem.on('click', function () {
                popOverService.generatePopover(elem, scope.popupTemplate, scope);
            });
        }
    }
}).service('popOverService', function ($compile, $timeout) {
    this.generatePopover = function (element, content, scope) {
        var compiledContent = $compile(content)(scope);
        
        element.popover({
            html: true,
            content: compiledContent,
            placement: 'top',
            trigger: 'manual'
        });

        $timeout(function () {
            element.popover('show');
        }, 0);

        $timeout(function () {
            element.popover('hide');
        }, 1000);
    }
});