JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/klaas4/jQuery.popover/raw/master/jquery.popover-1.1.0.js"></script>
<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
<div ng:app="app">
    <div ng:controller="Test">
        <p popover1="">Hello!</p>
        <p>{{ temp }}</p>
    </div>
</div>

CSS

/**
 * jQuery.popover example stylesheet.
 * By Davey IJzermans
 * http://daveyyzermans.nl
 * 
 * License: public domain
 */

.popover {
    position: absolute;
    top: 0; left: 0;
    max-height: 240px;
    width: 220px;
    display: none;
}
.popover.wider {
    width: 340px;
}
.popover.large {
    width: 470px;
    max-height: 350px;
}
.popover .arrow, .popover .top-arrow {
    position: absolute;
    top: 0; left: 50%;
    margin: -10px 0 0 -3px;
    width: 0; height: 0;
    border-top: 5px solid transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #121212;
}
.popover .bottom-arrow {
    top: 100%; left: 50%;
    margin: 0 0 0 -3px;
    border-top: 5px solid #121212;
    border-bottom: 5px solid transparent;
}
.popover .left-arrow {
    top: 50%; left: -10px;
    margin: -3px 0 0;
    border-right: 5px solid #121212;
    border-bottom: 5px solid transparent;
}
.popover .right-arrow {
    top: 50%; left: 100%;
    margin: -3px 0 0;
    border-left: 5px solid #121212;
    border-bottom: 5px solid transparent;
}
.popover .wrap {
    background: white;
    border: 3px solid #121212;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
.popover .title {
    background: #121212;
    color: white;
    font-size: 1.3em;
    text-align: center;
    padding: 8px 0 0 0;
    height: 27px;
}
.popover .content {
    padding: 15px;
    max-height: 175px;
    overflow: auto;
    line-height: 1.3em;
    font-size: 0.9em;
}
.popover.large .content {
    max-height: 285px;
}

p {
    display: block;
    width: 100px;
}

JavaScript

var module = angular.module("app", []);

module.directive('popover1', function() {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            console.log(scope.temp);
            element.popover({
                title: 'hello',
                content: "<p style='color: green;'>Hi</p>",
                trigger: 'hover'
            });
        },
    };

});

module.directive('popover2', function() {
    return function(scope, element, attrs) {
        element.popover({
            title: 'hello',
            content: "<p style='color: green;' ng:click='changeme()'>Hi</p>",
            trigger: 'hover'
        });
    };
});

function Test($scope) {
    $scope.temp = 'Hello';
    $scope.value = '1';
    $scope.changeme = function() {
        $scope.temp = 'Bye';
    };
}