I used to following tutorial to figure out how to get popups on WMS and WFS layers. Maybe it will be useful to you.
Here is some of the relevant code
map.on('click', function(evt) {
// Hide existing popup and reset it's offset
popup.hide();
popup.setOffset([0, 0]);
// Attempt to find a marker from the planningAppsLayer
var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
return feature;
});
if (feature) {
var coord = feature.getGeometry().getCoordinates();
var props = feature.getProperties();
var info = "<h2><a href='" + props.caseurl + "'>" + props.casereference + "</a></h2>";
info += "<p>" + props.locationtext + "</p>";
info += "<p>Status: " + props.status + " " + props.statusdesc + "</p>";
// Offset the popup so it points at the middle of the marker not the tip
popup.setOffset([0, -22]);
popup.show(coord, info);
} else {
var url = districtLayer
.getSource()
.getGetFeatureInfoUrl(
evt.coordinate,
map.getView().getResolution(),
map.getView().getProjection(),
{
'INFO_FORMAT': 'application/json',
'propertyName': 'NAME,AREA_CODE,DESCRIPTIO'
}
);
reqwest({
url: url,
type: 'json',
}).then(function (data) {
var feature = data.features[0];
var props = feature.properties;
var info = "<h2>" + props.NAME + "</h2><p>" + props.DESCRIPTIO + "</p>";
popup.show(evt.coordinate, info);
});
}
});