[question] cluster tooltip

[De-Lac]

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

[De-Lac]

no :(

[danzel]

Something like:
https://github.com/aratcliffe/Leaflet.tooltip
or
https://github.com/Leaflet/Leaflet.label
Maybe?

[Cyrille37]

👍
Would be lovely to get a method to show tooltip on cluster mouse over that will permit to compute some dynamic text to fill the tooltip.

[ghybs]

Hi,

I think you are looking for clustermouseover event on clusters:
https://github.com/Leaflet/Leaflet.markercluster/tree/master#events

You could also have bound tooltips / labels statically on clusters (which are pre-computed markers in fact). But I am not sure the libraries proposed above by @danzel give you the possibility to recompute the text (if you want it "dynamic"?) every time the tooltip / label is revealed.

By binding at each mouseover, you can emulate this re-computation easily.
Do not forget to unbind the tooltip / label on mouseout, possibly through a timeout to let it fade out.

Hope this helps.

[Cyrille37]

Thanks a lot. I think understood your answer but I do not see how to create a tooltip on mouseover. I do not find such method in Leaflet.

[ghybs]

Salut,

Please have a look at the 2 links given by danzel above.
You can combine them with MCG, given that all clusters created by MCG are actually markers themselves.

I used a similar technique in this example: http://ghybs.github.io/Leaflet.markercluster/hierarchical-tree-of-groups/index.html

I actually bound static labels, given that my data no longer change after initialization (or I completely redraw the MCG).
If you need changing text in your tooltip / label, you would have to customize the libraries or use the clustermouseover event to update the text / re-bind a new tooltip / label.

Hope this helps.

[danzel]

I think @ghybs has been very helpful in this issue, closing it off.
All of the required functionality is implemented in marker cluster (you combine it with another plugin for the label).

[Cyrille37]

Thanks a lot @ghybs ! I'll have a try.
Cheers, Cyrille.

[Cyrille37]

I tried Leaflet.label.
The unbindLabel() seems to not be the right solution, next over does not trigger the clustermouseover event.

The working like a charm solution I found is:

this.markers.on('clustermouseover', function (e)
{
 var content = new Date();
 var label = e.layer.getLabel();
 if( ! label )
  e.layer.bindLabel(content);
 else
  e.layer.updateLabelContent(content);
});

Cheers.

[Cyrille37]

May I add this example into "Event" section off the README ?? Like you want.

[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?

[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: Leaflet/Leaflet#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
}

[fonzane]

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?

This overrides the default icon creation, doesn't it?

I like the approach though, to specify the tooltip in the options object instead of in an event handler.