How To Implement Feature Popups in OpenLayers 5 on Mouse Hover and Click

I learned that OpenLayer 2 has an OpenLayer.control.featurepopup control that allow one to add popups that show when you hover on a feature on the map and when you click on a feature. I am looking for a way to do that with OpenLayer 5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Testing Popups</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
    <style>
        /* Always set the map height explicitly to define the size of the div
         * element that contains the map. */
        #map {
            height: 700px;
        }
    </style>

    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>
<body>
Popop!!!!
<div id="map"></div>

<script>
    var style,feature, map,vLayer,vSource,fpControl;
    $(document).ready(function () {
        style = [
            new ol.style.Style({
                image: new ol.style.Icon(({
                    scale: .7, opacity: 1,
                    rotateWithView: false, anchor: [0.5, 1],
                    anchorXUnits: 'fraction', anchorYUnits: 'fraction',
                    src: '//raw.githubusercontent.com/jonataswalker/map-utils/master/images/marker.png'
                })),
                zIndex: 5
            })
        ];

        feature = new ol.Feature({
            geometry: new ol.geom.Point(new ol.proj.fromLonLat([-0.890000,51.57889])),
            name: 'My Bus'
        });
        feature.setId(1007);
        feature.setStyle(style);

        // Create map
        vSource = new ol.source.Vector();
        vLayer = new ol.layer.Vector({
            source : vSource
        });
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                }),
                vLayer
            ],
            view: new ol.View({
                center: new ol.proj.fromLonLat([-0.890000,51.57889]),
                zoom: 12,
                numZoomLevels: 18,
                maxResolution: 156543.0339,
            })
        });

        vSource.addFeature(feature);

        fpControl = new ol.Control.FeaturePopups({
            boxSelectionOptions: {},
            layers: [
               [
                    // Uses: Internationalized templates.
                    vLayer, {
                        templates: {
                            hover: '${.name}',
                            single: '${i18n("Name")}: ${.name}<br>',
                            item: '<li><a href="#" ${showPopup()}>${.name}</a></li>'
                        }
                    }
                ]
            ]
        });
        map.addControl(fpControl);
    });
</script>
</body>
</html>

i expect to see a tool-tip showing some properties off the feature like the 'name' and 'id' when i hover on the feature and a popup with the same info when i click on the feature.

Solution

    .popup {
        border-radius: 5px;
        border: 1px solid grey;
        background-color: rgba(255, 255, 255, 0.9);
        padding: 2px;
    }

    <div id="map"></div>
    <div #popup class="popup" [hidden]="true"></div>

    this.popupOverlay = new Overlay({
        element: this.popup.nativeElement,
        offset: [9, 9]
    });
    this.map.addOverlay(this.popupOverlay);

    this.map.on('pointermove', (event) => {
        let features = [];
        this.map.forEachFeatureAtPixel(event.pixel,
            (feature, layer) => {
                features = feature.get('features');
                const valuesToShow = [];
                if (features && features.length > 0) {
                    features.forEach( clusterFeature => {
                        valuesToShow.push(clusterFeature.get('VALUE_TO_SHOW'));
                    });
                    this.popup.nativeElement.innerHTML = valuesToShow.join(', ');
                    this.popup.nativeElement.hidden = false;
                    this.popupOverlay.setPosition(event.coordinate);
                }
            },
            { layerFilter: (layer) => {
                return (layer.type === new VectorLayer().type) ? true : false;
            }, hitTolerance: 6 }
        );
        if (!features || features.length === 0) {
            this.popup.nativeElement.innerHTML = '';
            this.popup.nativeElement.hidden = true;
        }
    });

Obi, I had the same problem for the popup on hover over feature. I used OpenLayers 5 and Angular 6.

And I managed to solve it by creating a <div> popup element and referencing this element in an Overlay.

Added the overlay to the map object and define a pointermove event on the map. Within the pointermove event I reference the map and use the forEachFeatureAtPixel method.

The base layer for the on hover functionality was for me a ClusterSource, so multiple point features were grouped under one feature.

References: