JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="" ng-controller="DemoCtrl">
    
    <div ng-repeat="element in popovers" class="element">
        <div class="popover" ng-show="element.hovered && element.error" ng-style>Popover</div>
        <div class="popoverable" ng-mouseEnter="popoverShow(element)" ng-mouseLeave="popoverHide(element)">
            {{ element.name }}
        </div>
    </div>
    
    
</body>

CSS

.popoverable {
    width: 200px;
    background-color: red;
}

.popover {
    background: white;
    width: 200px;
    left: 210px;
    top: -12px;
    background: lightblue;
    position: absolute;
    padding: 10px;
    border-radius: 5px;
}

.element {
    position: relative;
    margin-top: 10px;
}

JavaScript

function DemoCtrl($scope)
{
    
    $scope.popovers = [
        {name: 'Element1 (Error)', error: true, hovered: false},
        {name: 'Element2 (no error)', error: false, hovered: false},
        {name: 'Element3 (Error)', error: true, hovered: false},
        {name: 'Element4 (no error)', error: false, hovered: false},
        {name: 'Element5 (Error)', error: true, hovered: false},
    ];
        
    
        
    $scope.popoverShow = function(element)
    {
        element.hovered = true;
    }
        
    $scope.popoverHide = function(element)
    {
        element.hovered = false
    }
        
}