JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
<span my-tooltip>Show Tooltip</span>
<span id="tooltip" class="tooltip hidden">Tooltip Text</span>
</div>

CSS

.tooltip {
    padding: 1em;
    background-color: #eee;
    display: inline-block;
    position: absolute;
}
.hidden {
    display: none;
}

JavaScript

angular
    .module("myApp", [])
    .directive('myTooltip', function () {
        return {
            restrict: "A",
            link: function (scope, element, attrs) {
                var tooltipText = angular.element(tooltip);
                element.bind('mouseover', function () {
                    tooltipText.removeClass('hidden');
                });
                // 'mouseleave' causing an issue, use 'mouseout'.
                element.bind('mouseout', function () {
                    tooltipText.addClass('hidden');
                });
            }
        };
    });