Fixed position PopUp window on hover and click on map exported from QGIS with qgis2leaf

Question

I have exported a QGIS map to leaflet using qgis2leaf plugin. I would like to have the popup window open on a fixed position (for example top-left) both when the user hovers over the location marker or clicks the marker. Currently my map has several thousand clustered points and this will be increasing to about 320,000. Here is my current code:

<div id="map"></div>
    <script src="data/exp_companiesmfg.js"></script>
    <script>
    var map = L.map('map', {
        zoomControl:true, maxZoom:19
    }).fitBounds([[29.2869584607,-97.125177203],[48.1774037293,-73.365090377]]);
    var hash = new L.Hash(map);
    var additional_attrib = 'created w. <a href="https://github.com/geolicious/qgis2leaf" target ="_blank">qgis2leaf</a> by <a href="http://www.geolicious.de" target ="_blank">Geolicious</a> & contributors<br>';
    var feature_group = new L.featureGroup([]);
    var raster_group = new L.LayerGroup([]);
    var basemap_0 = L.tileLayer('https://api.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoiY2FwdGFpbmtlIiwiYSI6ImNpZnFkcW92OWptdXZyeWx4ZmZvODllcmoifQ.kaikmX6bSG7ykWaO3tSWqw'
    }); 
    basemap_0.addTo(map);   
    var layerOrder=new Array();
    function pop_companiesmfg(feature, layer) {                 
        var popupContent = '<table><tr><th scope="row">Company:</th><td>'+ Autolinker.link(String(feature.properties['BusinessName'])) + '</td></tr><tr><th scope="row">Business Line:</th><td>' + Autolinker.link(String(feature.properties['BusinessLine']))+ '</td></tr><tr><th scope="row">Revenue PA:</th><td>' + Autolinker.link(String(feature.properties['Revenue'])) + '</td></tr><tr><th scope="row">Credit Score:</th><td>' + Autolinker.link(String(feature.properties['CreditScore'])) + '</td></tr><tr><th scope="row">.............................</th><td>'+ '</td></tr><tr><th scope="row">Address:</th><td>' + Autolinker.link(String(feature.properties['PhysicalAddress'])) + '</td></tr><tr><th scope="row">City:</th><td>' + Autolinker.link(String(feature.properties['City'])) + '</td></tr><tr><th scope="row">State:</th><td>' + Autolinker.link(String(feature.properties['State'])) + '</td></tr><tr><th scope="row">County:</th><td>' + Autolinker.link(String(feature.properties['County'])) + '</td></tr><tr><th scope="row">ZIP:</th><td>' + Autolinker.link(String(feature.properties['ZIP'])) + '</td></tr><tr><th scope="row">Phone:</th><td>' + Autolinker.link(String(feature.properties['Phone'])) + '</td></tr><tr><th scope="row">Website</th><td>' + Autolinker.link(String(feature.properties['Website'])) + '</td></tr></table>';
        layer.bindPopup(popupContent);
    }
    var exp_companiesmfgJSON = new L.geoJson(exp_companiesmfg,{
        onEachFeature: pop_companiesmfg,
        pointToLayer: function (feature, latlng) {  
            return L.circleMarker(latlng, {
                radius: 8.0,
                fillColor: '#ff7f00',
                color: '#ff7f00',
                weight: 1,
                opacity: 1.0,
                fillOpacity: 1.0
            })
        }
    });
    var cluster_groupcompaniesmfgJSON= new L.MarkerClusterGroup({showCoverageOnHover: false});
    cluster_groupcompaniesmfgJSON.addLayer(exp_companiesmfgJSON);
    //add comment sign to hide this layer on the map in the initial view.
    cluster_groupcompaniesmfgJSON.addTo(map);

    feature_group.addTo(map);
    var title = new L.Control();
    title.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
        this.update();
        return this._div;
    };
    title.update = function () {
        this._div.innerHTML = '<h2>Manufacturing Companies</h2>'
    };
    title.addTo(map);
    var osmGeocoder = new L.Control.OSMGeocoder({
        collapsed: false,
        position: 'topright',
        text: 'Search Location!',
    });
    osmGeocoder.addTo(map);
var baseMaps = {
    'OSM Standard': basemap_0
};
    //L.control.layers(baseMaps,{"companiesmfg": cluster_groupcompaniesmfgJSON},{collapsed:false}).addTo(map);
    L.control.scale({options: {position: 'bottomleft',maxWidth: 100,metric: true,imperial: false,updateWhenIdle: false}}).addTo(map);
    </script>

Answer 1

You can have a look at my answer to this question: Open popups in a fixed position with Leaflet. You can do the same for hovering.