I have a problem with the Popup of OpenLayers 4, when I open the popup info and I'm inside the div with the pointer, it is still triggering the hover popup with the data behind the popup, how can I prevent that?

I'm using this CSS code for the popup:

#popup {
  z-index: 20;
  background-color: #fff;

The popup is created with the overlay layer:

overlay = new ol.Overlay({
  element: container,
  autoPan: true,
  autoPanAnimation: {
    duration: 250

But the pointer still passes through the div. the popup contains a lot of div and inside span

In the screenshot the hover popup was triggered when the pointer was on the Vehs text

enter image description here

You can refer to this for the code I use for the popup, the only difference is that I have a hover popup, I think the problem is on the creation of the click popup (the one with button) and the real z-index of it.


  • There's no problem if you just followed the OL's example. need more code to figure out any error.
    – Chase Choi
    Commented Mar 16, 2018 at 1:58

1 Answer 1


In the end, I found a very simple way to solve the problem, inside the function I call for the hover popup I add a simple if statement

map.on('pointermove', function(evt) {


    if (overlay.getPosition() !== undefined) {

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.