Angular create a mouseenter popover that you can click

Question

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.

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. Create Hoverable popover using angular-ui-bootstrap

Here is my code

  <div style="width:50px" popover="I appeared on mouse enter!" 
  popover-placement="right" popover-trigger="mouseenter" popover-popup-delay=600>Item 1</div>
  <div style="width:50px" popover="I appeared on mouse enter!" 
  popover-placement="right" popover-trigger="mouseenter" popover-popup-delay=600>Item 2</div>
  <div style="width:50px" popover="I appeared on mouse enter!" 
  popover-placement="right" popover-trigger="mouseenter" popover-popup-delay=600>Item 3</div>
  <div style="width:50px" popover="I appeared on mouse enter!" 
  popover-placement="right" popover-trigger="mouseenter" popover-popup-delay=600>Item 4</div>

http://plnkr.co/edit/moHGYOdmIOE4IFDOICKs?p=preview

Answer 1

I think you'll have to create your own. You could probably do what you want this way (editing tooltip.js):

1. add a delay between mouseleave and closing the popover to give you time to move your mouse to the popover
2. bind events to the popover element itself as well, so you track it's mouseenter/mouseleave
3. keep a counter of elements inside, incremented on mouseenter and decremented on mouseleave. Only finally close the tooltip if the counter is 0 after the leave delay