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 ```

Item 1

Item 2

Accepted Answer

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

- add a delay between `mouseleave` and closing the popover to give you time to move your mouse to the popover

- bind events to the popover element itself as well, so you track it's mouseenter/mouseleave

- 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

Angular create a mouseenter popover that you can click

Solution

Problem

Related problems