JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
{{1+1}}<br/>
<button popover="no">Popover 1A</button>
<button popover="yes" popover-title="x">Popover 1B</button>
<div popover='no'><button>Popover 2A</button></div>
<div popover='yes' popover-title="y"><button>Popover 2B</button></div>
</div>

JavaScript

angular.module('myApp',[]);

angular.module('myApp').directive('popover', function () {
    return function(scope,elem,attrs) {
        var text, title, label ;
        if (elem[0].tagName == "BUTTON") {
            text = attrs.popover;
            if (attrs.popoverTitle) {
                title = attrs.popoverTitle;
                attrs.$set('ariaLabel', title);
            } else {
                attrs.$set('ariaLabel', text);
            };
            console.log(elem[0]);
        };
        if (elem[0].tagName == "DIV") {
            label = "";
            if (attrs.popoverTitle) {
                label = attrs.popoverTitle;
            } else {
                label = attrs.popover;
            }
            var button = elem.find("button");
            button.attr('aria-label', label);
            console.log(button[0]);
        };
    };
});