0

I am making a related list, that is filterable by certain criteria. I am developing a lightning component that i can use on Lightning Builder. In the component, i use <lightning:overlayLibrary> component to show a popup when users hovers a hoverable record link.

This is the picture of my current popup: enter image description here

The problem i am facing, is opening and closing the popup correctly. Currently i am triggering a onmousover event on the DIV element and automatically close the event after 3 seconds. The DIV is the "9999999" as link on the left side of the picture.

Problems with that solution:

1) When user is going over the div not intentionally, the popup will show up because onmouseover event was triggered.

2) When user fastly drags the mouse over all the records in the related list, many popup's will show up, i have a check in my javascript that only 1 popup could be shown at once, but i am using setTimeout().

3 When users want to see the popup longer than 3 seconds, they have to reopen it. When i did not close the popup after 3 sec but used onmouseleave event, then when i go on the popup with my mouse, the popup will close, because the triggering div is this number "999999"

What i want to do, is Allow only 1 popup to be open, and if users leave the popup with the mouse, then the popup will be closed. Otherwise the popup will stay open.

  • please share your code – Itai Shmida Jun 3 '18 at 7:14
  • Have to put a mouseenter event to the popover div? – Ronnie Aug 21 '18 at 1:26
  • I actually did not need this functionality when i analyzed business needs a bit deeper. But i got the solution for this, basically you would have to bind variable between the popup component and main component using component.getReference(), thisway you have bidirectional communication and it is easy to close/open the popup. – RSICK Aug 21 '18 at 13:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.