Mouse over Popup on multiple markers leaflet.js?

Question

so I have a leaflet map with lot of markers placed on it. I want to have a popup with like the status of asset etc on 'hover' over the marker. I see some examples on google and try to implement but none of them is firing any events. here is my code with my attempt. how can i achieve this feature? do i have to use somekind of tooltip instead of popup?

  buildMarkerLayer = (rawAssetsObjects) => {
    let markersGroup = null;
    var self = this;

    markersGroup = L.markerClusterGroup({
        spiderfyOnMaxZoom: true,
        showCoverageOnHover: true,
        zoomToBoundsOnClick: true,
        spiderfyDistanceMultiplier: 2
    });

      self.$localForage.getItem('showAllAreas').then((_showAll) => {
        if(_showAll){
            this.loadAllAreas();
        }else{
            this.hideAllAreas();
        }

    });



    angular.forEach(rawAssetsObjects, function(_asset) {

        if(_asset.latitude && _asset.longitude){
            markersGroup.addLayer(L.marker(L.latLng(_asset.latitude,
            _asset.longitude), {
            id: _asset.id,
            icon: L.divIcon({
                html: self.siMarkers.createHTMLMarker(_asset)
            })
            }).on('click', function(e) {
                //dismiss the event timeline 
                self.$mdSidenav('right').close();

                self.centerOnClick(_asset);
                //set the selected asset to a shared service for availability in
                //other controllers
                self.siMapRam.setActive(_asset);
                //inform detail controller of a newly selected asset to query
                self.$rootScope.$broadcast('ActiveAssetChange');
                self.dgModal.display();
            }).bindPopup('work').on('mouseover',function(ev) {
               markersGroup.openPopup();
}));
        };
    });

    return markersGroup
}

so I added the mouseover function and is responding on the console with error, so at least i know the listening part is working

Homely

Please include full html and javascript files. Preferably, using jsfiddle of any similar. – Anamorphosis

its a part of a giant app, too many dependencies of files to display portion of map. – Homely

thanks tho, i have a solution to my problem. Please checkout – Homely

great. Best of luck! – Anamorphosis

@Anamorphosis FYI. jsfiddle doesn't support Angular. – Spoilfive

Answer 1

I was close to the answer, while following many examples on google they made L.Marker into a variable like var marker = L.marker. Then call marker.openPopup(). My case, as you can see, I straight called L.marker. Problem was calling L.marker.openPopup() or L.marker(openPopup()) throws error saying openPopup is undefined. so the solution was pretty straight forward and make L.marker into a variable. like below. I also added small popup formatting like where pop-up should display using popAnchor and HTML formatting, for future flowers

angular.forEach(rawAssetsObjects, function (_asset) {

          let marker =  L.marker(L.latLng(_asset.latitude,
                  _asset.longitude), {
                      id: _asset.id,
                      icon: L.divIcon({
                          html: self.siMarkers.createHTMLMarker(_asset),
                          popupAnchor: [0,-80]
                      })

                  });

          if (_asset.latitude && _asset.longitude) {
              let content = "<b>"+_asset.name+"</b>"+"<br>"+"<b>"+'Status: '+"</b>"+_asset.status
              markersGroup.addLayer( marker.bindPopup(content)
                     .on('mouseover', function (e) {
                      self.siMapRam.setActive(_asset);
                      self.$rootScope.$broadcast('ActiveAssetChange');
                      marker.openPopup()

                  })
                  .on('click', function (e) {
                      //dismiss the event timeline 
                      self.$mdSidenav('right').close();
                      self.centerOnClick(_asset);
                      //set the selected asset to a shared service for availability in
                      //other controllers
                      self.siMapRam.setActive(_asset);
                      //inform detail controller of a newly selected asset to query
                      self.$rootScope.$broadcast('ActiveAssetChange');
                      self.dgModal.display();
                  }));
          };
      });

    return markersGroup
}

Homely