Tooltip/popover as menu (different opening and closing events)

[davidpelayo]

From what I need, I've realised we can refactor a bit the code to support the popover concept be used like a menu component.

In my case, I need a scenario where given a certain div, by declaring it as popover, it would be nice to set an option to make the popover behaves like a menu component. Meaning it needs to be opened with different events simultaneously (like mouseenter as well as click/focus), while closing should be defined when clicking or, complementary, when mouseleaving the div area or the menu (children div) area.

Do you think it would be possible to manage to have anything similar to this? Thanks.

[pkozlowski-opensource]

Yes, this is basically a question about supporting programmatic triggers, which we've got on the roadmap.

[davidpelayo]

To me, in my case, with what I wanted to achieve, it's doable by adding just four loc at $tooltip's level.

Concretely, inside function show() {, I added after scope.$digest(); the following:

if (triggers.hide === 'click') { elements.next().bind( 'mouseleave', hideTooltipBind); }

Why here and not when building? Because the list of elements (to my case I added unsafely a ul markup to show on the popover) must be first already rendered.

To unbind the event, in function hide() { after popupTimeout = null; I just added:
element.next().unbind( 'mouseleave', hideTooltipBind);

Which, at the end, allowed me to close the popover not only when clicked on the initial popover related element but also when visited (hovered) the popover and then leaved that area.

Any better suggestion? It would be nice to add a directive or similar to control this specific behaviour in a better and cleaner way.

[icfantv]

Closing as duplicate of #590.