Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular create a mouseenter popover that you can click

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

like image 548
Marianna Avatar asked Feb 11 '14 21:02

Marianna


1 Answers

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
like image 60
Jason Goemaat Avatar answered Sep 21 '22 02:09

Jason Goemaat