SOURCE

const map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat([116.39123296750768, 39.907180309385694]),
        zoom: 8
    })
});

const popup = new ol.Overlay({
    element: document.getElementById('popup'),
    positioning: 'bottom-center'
});
map.addOverlay(popup);

map.on('click', (evt) => {
    popup.setPosition(evt.coordinate);
})

<div id="map"></div>

<div id="popup">
    <div class="popover">
        <div class="arrow"></div>
        <div class="popover-body">popup</div>
    </div>
</div>

html,body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#map {
    height: 100%;
    width: 100%;
}
.popover {
    margin-bottom: .5rem;
}
.popover-body {
    padding: 5px 8px;
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
}
.arrow {
    position: absolute; 
    width: 1rem;
    height: .5rem;
    bottom: 0;
    left: calc(50% - 0.5rem);
}
.arrow::before, .arrow::after {
    position: absolute;
    display: block;
    content: '';
    border-color: transparent;
    border-style: solid;
    box-sizing: border-box;
}
.arrow::before {
    bottom: 0;
    border-width: .5rem .5rem 0;
}
.arrow::after {
    bottom: 1px;
    border-width: .5rem .5rem 0;
    border-top-color: #fff;
}