Close popup overlay after dragging over a feature

Question

I have a popup that appears when I drag my mouse over a vector feature in my map. This popup is based on two OpenLayers examples: OpenLayers example #1 and OpenLayers example #2.

I want the popup to automatically close when my mouse is no longer over the feature. Any idea how can I achieve that ?

Actually, this is my code:

var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
var overlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
    element: container,
    autoPan: true,
    autoPanAnimation: {
      duration: 250
    }
  }));

closer.onclick = function() {
    overlay.setPosition(undefined);
    closer.blur();
    return false;
  };

var highlightStyleCache = {};

var featureOverlay = new ol.layer.Vector({
    source: new ol.source.Vector(),
    map: olMap,
    style: function(feature, resolution) {
      var text = resolution < 5000 ? feature.get('name') : '';
      if (!highlightStyleCache[text]) {
        highlightStyleCache[text] = new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: '#f00',
            width: 1
          }),
          fill: new ol.style.Fill({
            color: 'rgba(255,0,0,0.1)'
          }),
          text: new ol.style.Text({
            font: '12px Calibri,sans-serif',
            text: text,
            fill: new ol.style.Fill({
              color: '#000'
            }),
            stroke: new ol.style.Stroke({
              color: '#f00',
              width: 3
            })
          })
        });
      }
      return highlightStyleCache[text];
    }
});

var highlight;
var displayFeatureInfo = function(pixel,coordinate) {

    var feature = olMap.forEachFeatureAtPixel(pixel, function(feature) {
      return feature;
    });

    // var info = document.getElementById('info');
    if (feature) {
        content.innerHTML = 'Feature value:\n' + feature.get('ZLEVEL');
        overlay.setPosition(coordinate);
    } else {
      // info.innerHTML = '&nbsp;';
    }

    if (feature !== highlight) {
      if (highlight) {
        featureOverlay.getSource().removeFeature(highlight);
      }
      if (feature) {
        featureOverlay.getSource().addFeature(feature);
      }
      highlight = feature;
    }

  };

var olMap = new ol.Map({
    layers: [group, group3, group2],
    overlays: [overlay],
    target: "map",
    view: new ol.View({
        center: ol.proj.transform([-71.16237,48.42432], "EPSG:4326", "EPSG:3857"),
        zoom: 14,
        projection: "EPSG:3857"
    })
}); 

olMap.on('pointermove', function(evt) {
    if (evt.dragging) {
      return;
    }
    var pixel = olMap.getEventPixel(evt.originalEvent);
    var coordinate = evt.coordinate;
    displayFeatureInfo(pixel,coordinate);
  });

Answer 1

Ok I solved my problem. I added:

overlay.setPosition(undefined);
closer.blur();
return false;

to the else condition of this section:

if (feature) {
    content.innerHTML = 'Feature value:\n' + feature.get('ZLEVEL');
    overlay.setPosition(coordinate);
} else {
////// HERE //////
}

Now the popup close automatically when my cursor is not on a feature.

Answer 2

Does it have a special reason that the popop appear by dragging, but i would suggest to use the Select Interaction with a pointermove.

var selectinteraction = new ol.interaction.Select({
      condition: ol.events.condition.pointerMove,//maybe ther is a drag?
      layers: [**your vectorlayer**]
});

After you created the selectinteraction you can hook on the events. Note the following is only pseudocode.

selectinteraction.on('select', function (e) {
    e.target.getFeatures().forEach(function (feature, index) {
        //if xou eant to show some selected feature stuff
        closer.setPopupInformation(feature);
        closer.show();
    });
    //if select is empty as your mouse isn't on a feature element, close the popup
    if (e.target.getFeatures().getLength() === 0) {
        closer.hide();
    }
});