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

use angular ui bootstrap https://angular-ui.github.io/bootstrap/ look at this plunkr http://plnkr.co/edit/a165oiq4bgmVtFvJebTG?p=preview — Pankaj Parkar, May 29 '15 at 05:57
@TheWarlock then he should have mention in his question..May be he don't have any idea about such feature — Pankaj Parkar, May 29 '15 at 06:12
@samyak - you may want to try out custom attribute based directives - https://docs.angularjs.org/guide/directive OR you can simply add use a combination of event bindings and methods added to your scope like this one - http://stackoverflow.com/questions/22532656/ng-mouseover-and-leave-to-toggle-item-using-mouse-in-angularjs — Praveen Puglia, May 29 '15 at 06:13

score 9 · Accepted Answer · answered May 29 '15 at 06:16

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

popup a div on mouseover in Angularjs

1 Answers1