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

Allomorph

use angular ui bootstrap angular-ui.github.io/bootstrap look at this plunkr plnkr.co/edit/a165oiq4bgmVtFvJebTG?p=preview – Villegas

@TheWarlock then he should have mention in his question..May be he don't have any idea about such feature – Villegas

@samyak - you may want to try out custom attribute based directives - 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 - #22533156 – Waive

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

Candice