title: Angular create a mouseenter popover that you can click
body: <p>I'm trying to create a popover which you can click.  AngularUI has a nice way of indicating a delay for how long you need to hover for a popover to appear, but I need a similar directive that allows me to click inside the popover.  I can't do this because it automatically disappears on mouseleave.  I could use something like popover-close-delay, but I also want to ensure that there is only one popover open at a time.  Ideally, hovering on a popover would work the same as hovering on its parent element.</p>
  
  <p>I also found this, but I can't get it to work and I suspect it may be related to AngularStrap and not the bootstrap ui. <a href="https://stackoverflow.com/questions/20267967/create-hoverable-popover-using-angular-ui-bootstrap">Create Hoverable popover using angular-ui-bootstrap</a></p>
  
  <p>Here is my code</p>
  
  <pre><code>  &lt;div style="width:50px" popover="I appeared on mouse enter!" 
    popover-placement="right" popover-trigger="mouseenter" popover-popup-delay=600&gt;Item 1&lt;/div&gt;
    &lt;div style="width:50px" popover="I appeared on mouse enter!" 
    popover-placement="right" popover-trigger="mouseenter" popover-popup-delay=600&gt;Item 2&lt;/div&gt;
    &lt;div style="width:50px" popover="I appeared on mouse enter!" 
    popover-placement="right" popover-trigger="mouseenter" popover-popup-delay=600&gt;Item 3&lt;/div&gt;
    &lt;div style="width:50px" popover="I appeared on mouse enter!" 
    popover-placement="right" popover-trigger="mouseenter" popover-popup-delay=600&gt;Item 4&lt;/div&gt;
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/moHGYOdmIOE4IFDOICKs?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/moHGYOdmIOE4IFDOICKs?p=preview</a></p>