Popover to remain open when hovering over it

[boillodmanuel]

Popover triggered by mouseenter event hide himself as soon as the mouse leave the target element. And it's impossible to click on a link which was in the popover.

I've found some solution in SO which can help for the PR :

• link to SO: http://stackoverflow.com/questions/20267967/create-hoverable-popover-using-angular-ui-bootstrap
• direct link to jsfiddle: https://jsfiddle.net/6awhrcec/

And another link with a vanilla js solution: http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/

Could you add this feature?

[RobJacobs]

The popover-trigger attribute allows you to define which triggers show and hide the popover using the following format:

popover-trigger="showtrigger hidetrigger"

The directive is simply doing the following for you:

element.bind(showtrigger, showTooltipBind)
element.bind(hidetrigger, hideTooltipBind)

The plunker demonstrates using 'mouseenter click' trigger that will leave the popup open during interaction. While this get's us most of the way there, it's not as stable as I would like it to be.

I have been working on a blurNotChildren trigger that will not call the close method until the trigger element or the popup are no longer the document.activeElement. Here is a plunker that demonstrates that approach.

The other ways I've seen of accomplishing this require listeners on several elements and document body click which get's messy to clean up and doesn't necessarily account for a blur event.

[chrisirhc]

I'm marking this as Purgatory as I think this sort of custom handling should be left to the user/developer. Instead, we should expose the triggers through a directive controller to allow users to show/hide the tooltip/popovers with their custom handling logic.

If this becomes a high frequency problem, we can consider it further. However, right now, this adds a new feature that isn't there on Bootstrap and I'm worried about bloating this directive with features that most users wouldn't use (and making it buggy and slow).

[tmcgee123]

I had a similar issue and addressed it by creating a close delay that I could set through the popover directive (~2000-3000 milliseconds worked well). The problem is that if you attempt to override the fade class that bootstrap provides or attempt to hijack the listeners, things get a little wonky. I have created this feature via PR #3576

[erquhart]

@chrisirhc you mentioned exposing the triggers to allow custom handling logic - is that on the roadmap by chance?

[plong0]

I've made a patch for this at PR #3942
adding tooltip-hoverable=true or popover-hoverable=true will enable the feature when triggers.hide is mouseleave

[icfantv]

This issue sounds identical to #3855. @wesleycho, I think we can close this.

@boillodmanuel, please see the comments in the referenced issue above for the proper solution.

[wesleycho]

Closing as per comments.

[odedkeren1]

I have solved it in a very cleaned way and thought to share it: .popover is being created not as a child of the uib-popover so the idea is to wrap uib-popover with a parent and to control show&hide on hovering the parent. .popover and uib-popover are children of this parent so just left to set popover-trigger=none and you have what you are wishing for.

I created a plunk example: https://plnkr.co/edit/6vzrrH1KUyQeLHDz1hWp?p=preview

[evenicoulddoit]

Here's another pretty clean way, which doesn't require that the tooltip and the trigger elementactually overlap:

https://plnkr.co/edit/GBjrZiGqXSucPiiXTg0C?p=preview

Essentially, in order to allow the user to "jump" between the elements, we just need to add some sort of grace period (in this case, 500ms) after which we mark the popover as closed.

[odedkeren1]

evenicoulddoit: its the same thing as in my answer the only difference is that you added popover-popup-close-delay

[evenicoulddoit]

@odedkeren1 The timeouts in my version allow the tooltip to not be immediately touching the parent, though the actual solution I've come up with for work also works for tooltip-append-to-body

[VenkatRamReddyK]

Easiest way to have a mouse-event using uib-popover
Look at the below working example !
https://plnkr.co/edit/9oMYadXPNJcRPrig71iF?p=preview

[odedkeren1]

@VenkatRamReddyK
its the same as my answer.
and by the way you have popover-trigger="outsideClick" no meaning to have it, you can use "none"

[bmrinal]

@evenicoulddoit it doesn't work for popover-append-to-body="true". how this can be resolved?

[evenicoulddoit]

@bmrinal https://plnkr.co/edit/kciyLQ6LZQRNdkj1xQNB?p=preview

[bmrinal]

@evenicoulddoit it still closes the popover when cursor is inside it

[changus]

@bmrinal @evenicoulddoit I am in need of it working with popover-append-to-body="true" as well!