// display popup on click
map.on('click', function (evt) {
const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
return feature;
});
if (feature) {
popup.setPosition(evt.coordinate);
$(element).popover({
placement: 'top',
html: true,
content: feature.get('name'),
});
$(element).popover('show');
} else {
$(element).popover('dispose');
}
});
// change mouse cursor when over marker
map.on('pointermove', function (e) {
const pixel = map.getEventPixel(e.originalEvent);
const hit = map.hasFeatureAtPixel(pixel);
map.getTarget().style.cursor = hit ? 'pointer' : '';
});
// Close the popup when the map is moved
map.on('movestart', function () {
$(element).popover('dispose');
});
See example here https://openlayers.org/en/latest/examples/ relevant code: