JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://openlayers.org/en/v3.0.0/build/ol.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div id="map" class="map"></div>
<div style="display: none;"> <div id="popup"></div> </div>

CSS

.popover {
    z-index: auto;
    min-width: 200px;
}

JavaScript

// define map
var map = new ol.Map({
    target: "map",
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    view: new ol.View({
        zoom: 1,
        center: ol.proj.transform([0,0], "EPSG:4326", "EPSG:3857"),
    })
});

// define popup overlay
popup = new ol.Overlay({
    element: document.getElementById("popup")
});
map.addOverlay(popup);

// define feature
var FeatureLayer = new ol.FeatureOverlay({
    map: map,
    features:  [new ol.Feature({
        geometry: new ol.geom.Circle([0,0], 1000000),
    })]
})

// define mouse move event
$(map.getViewport()).on("mousemove", function(evt) {
    var pixel = map.getEventPixel(evt.originalEvent);
    var coordinate = map.getCoordinateFromPixel(pixel)
    displayFeatureInfo(pixel, coordinate, evt);
});

// popover display function
var feature_prev
function displayFeatureInfo(pixel, coordinate, e) 
{
    console.log(e.target.className);
    //console.log(e.target.className == 'popover-content');
    var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
        return feature;
    });
    if (feature == feature_prev)  // if same feature, leave popup open
    {
        return
    }
    
     if (e.target.className == 'popover-content' || e.target.tagName.toLowerCase() === 'a') 
    {
        return;
    }
            
    // display popover
    var element = popup.getElement();
    if (feature)  // if mouse is over feature
    {
        coords = ol.proj.transform([0,0], "EPSG:4326", "EPSG:3857"),
        popup.setPosition(coords);
        $(element).popover("destroy")
        $(element).popover({
            "html": true,
            "content":  "<a href='http://www.google.com'>Link 1</a><br>"+
            			"<a href='http://openlayers.org'>Link 2</a>"
        });
        $(element).popover("show");
        feature_prev = feature
    }
    else  // destroy popup
    {
        $(element).popover("destroy")
        feature_prev = []
    }
}