2

Is it possible to catch a tooltip click which doesn't fire marker click handler? For example the following doesn't work

var t = L.tooltip({permanent: true, interactive:true}, marker).setLatLng([51.505, -0.09])
                                                              .setContent("test")
                                                              .addTo(map);
t.on('click', function(){
    console.log("tooltip click handler");
});

While, with the following clicking the tooltip fires any marker click handler defined

var marker = L.marker([51.5, -0.09]).addTo(map);
var t = L.tooltip({permanent: true, interactive:true}, marker).setLatLng([51.505, -0.09])
                                                              .setContent("test")
                                                              .addTo(map);

marker.bindTooltip(t);
marker.on('click', function(){
    console.log("marker click handler");
});

Is it possible to prevent any marker handler defined to be executed when clicking a tooltip?

2

Looks like events are automatically passed to the marker indeed.

A workaround would be to detect whether the originalEvent originates from the tooltip's container or not:

EDIT

Detecting tooltip's specific class (and using hasClass as proposed in https://stackoverflow.com/questions/5898656/test-if-an-element-contains-a-class)

marker.on('click', function(event) {
  var originalTarget = event.originalEvent.target;

  if (hasClass(originalTarget, "leaflet-tooltip")) {
    console.log("tooltip click handler");
  } else {
    console.log("marker click handler");
  }
});

Demo: https://jsfiddle.net/3v7hd2vx/114/


Original code:

var tooltipContainerId = L.stamp(t._container);

marker.on('click', function(event) {
  var originalTarget = event.originalEvent.target;

  if (L.stamp(originalTarget) === tooltipContainerId) {
    console.log("tooltip click handler");
  } else {
    console.log("marker click handler");
  }
});

Demo: https://jsfiddle.net/3v7hd2vx/111/

  • The trick works, although I've to write such test in at least two different event handlers. In addition, checking event.originalEvent.target is a good approach, I can't test for containerId because I've thousand markers (and tooltips). – mep Oct 24 '16 at 11:43
  • Instead of checking the container id, you could try to find a more generic differentiator. CSS classes would probably be a good place to look into. – ghybs Oct 24 '16 at 11:48
  • @mep here you go with class detection instead of id comparison. See the above edited answer. – ghybs Oct 25 '16 at 2:20
0

If the idea is to take action when tooltip is clicked then you can also do it by making the tooltip a hyperlink that when clicked leads to javascript execution. In order to do this however you must pass the option interactive: true when creating the tooltip:

layer.bindTooltip(tooltipContentForLayer(layer), {
  interactive: true,
});

Where tooltipContentForLayer() is defined as:

function tooltipContentForLayer(layer) {
  return '<a href="#" onclick="editLabel(\'' + layer.SB_layerId + '\');">' + layer.SB_label + '</a>';
}

and

function editLabel(layerId) {
  console.log('EDIT ' + layerId);
}

SB_layerId and SB_label are custom attributes I attached to layers previously, e.g. layer.SB_layerId = 2;.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.