Geek Answers Handbook

Angular create a mouse sector that you can click

I am trying to create a popover that you can click. AngularUI has a good way to specify a delay on how long you need to hang for a popover to appear, but I need a similar directive that allows me to click inside a popover. I can’t do this because it automatically disappears on a mouse background. I could use something like popover-close-delay, but I also want only one popover to open at a time. Ideally, a hover on a popover will work just like a hover on its parent.

I also found this, but I can't get it to work, and I suspect that this might be due to AngularStrap, not bootstrap ui. Create aoverable popover with 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

+6
source share
1 answer

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

  • add a delay between mouseleave and mouseleave close to give you time to move the mouse over the popover
  • bind events to the popover element itself, so you track its mouseenter / mouseleave
  • keep the item counter inside, increase on mouseenter and decrease on mouseleave. Only finally close the tooltip if the counter is 0 after a vacation delay
+1
source

More articles:


All Articles