[question] cluster tooltip

hello. I would like to know if there is a way to bind a on:hover tooltip to the cluster marker. I tried using Bootstrap tooltip in the html parameter of the iconCreateFunction, but it doesn’t work.

var tooltip = '<a href="#" data-toggle="tooltip"  data-original-title="I am a tooltip">cluster name</a>';
var cluster = new L.MarkerClusterGroup({showCoverageOnHover: true,
                                       spiderfyOnMaxZoom: true,
                                       iconCreateFunction: function (cluster) 
                                                            { return L.divIcon({ html: tooltip, className: 'tooltip', iconSize: L.point(40, 40) });}
                                        });
/*add markers to the cluster*/
$('.tooltip').tooltip();
map.addLayer(cluster);  

Thank you

[Lekensteyn]

This code seems still functional with Leaflet 1.4.0 and Leaflet.markercluster 1.4.1:

   L.markerClusterGroup.on('clustermouseover', function(ev) {
        ev.propagatedFrom.bindTooltip('tooltip text', {sticky: true}).openTooltip();
    }).on('clustermouseout', function(ev) {
        ev.propagatedFrom.unbindTooltip();
    });

Note: Either .layer and .propagatedFrom would work for FeatureGroups like L.markerClusterGroup, but the former is deprecated since it was ambiguous for other types: https://github.com/Leaflet/Leaflet/pull/5880

Another caveat is that with IE9, the tooltip is rapidly closed, potentially due to hovering over the tooltip element (which triggers clustermouseout). (This issue is also visible with tooltips on other layer elements, the tooltip.) If IE9 support is important (meh…), you could workaround that by setting tooltip options like:

{
    offset: [10, 0],
    direction: 'right', // important, otherwise the offset could be applied in the wrong direction
    sticky: true
}

[Azmisov]

Now that tooltips have been merged leaflet core, I am wondering what the recommended approach to adding tooltips is. Currently, I’m doing something like:

L.markerClusterGroup({
    iconCreateFunction: function(c){
        c.bindTooltip("tooltip text", {direction: "right"});
        return generate_icon(c);
    }
})

Is there a better way to do it?