popup a div on mouseover in Angularjs

Question

I'm new in AngularJS, how can i show popup a div on mouseover using AngularJS. If i resize a div on mouseover, it changes whole structure, how to show popup div without disturbing neighbors elements.

Markup

<div ng-repeat="x in images | filter:test" style="float:left; width:30%"  ng-mouseover="count=1" ng-mouseleave="count=0" >
    <img ng-src="{{x.path}}"
        style="width: 100px; height:100px"><div> {{x.company}}</div>
        <div style="background-color:#E6E6FA;text-align: center;"ng-show="count"> 
            price:{{x.price}}</br>
            size:{{x.size}}</br>

        </div>
        </img>
<div/>

I added extra things in markup like company,size on mouseover. help me in pop a image on mouseover. Thanks in advance

Answer 1

You have to do two things. First you have to position your popover element absolute, so that it doesn't disturb the flow of the other elements when it pops up. Something like this (z-index is what makes it to be over the other elements):

.popover {
  position: absolute;
  z-index: 100;
}

And in your html-markup you can use the ng-mouseover directive.

<div ng-mouseover="showPopover()" ng-mouseleave="hidePopover()">
  more info
</div>
<div class="popover" ng-show="popoverIsVisible">Popover Content</div>

Your angular controller will probably look something like this

$scope.showPopover = function() {
  $scope.popoverIsVisible = true; 
};

$scope.hidePopover = function () {
  $scope.popoverIsVisible = false;
};

If you have more than one, you are probably better of putting all that stuff into a directive