title: How to create custom directives for mouseover and mouseleave in angularjs
body: <p>I want to create custom directives instead of ng-mouseover and ng-mouseleave, since ng-mouseleave didnt work in chrome.</p>
  
  <p>My requirement is when i mouseover, a popover should appear and when I mouseleave, it should close. The close functionality is not closing in few situations in chrome(the frequency of popover closing is inconsistent).</p>
  
  <pre><code>&lt;div class="eleCalc" ng-mouseover="calcPopOver(i)" id="term{{i.Id}}" ng-mouseleave="hidePopOvers()"&gt;
                      {{calcNumbers(i)}}
  &lt;/div&gt;
  </code></pre>
  
  <p>calcPopOver function opens popup and 
  hidePopOvers() closes.</p>
  
  <p>Please help to create new directive.</p>
  
  <p>Thanks</p>