Lajos Arpad Lajos Arpad - 2 months ago 23
jQuery Question

How can I programmatically open the tooltip of a leaflet marker?

I am using leaflet and I have a few markers. If I hover on the marker icon its tooltip automatically opens, showing the related data. I have my markers stored inside a variable called

woMarkers
and everything works using it except this feature. If I do something like this:

$(woMarkers[0]._icon).hover();


then nothing happens, no error and the tooltip does not open. These are the options I am using:

var woOptions = {
fitBounds: true,
enableLandmarkLink: false,
reDrawBounds: true,
showControls: true,
getName: function(record) {
return record[('Job Number' in record ? 'Job Number' : 'Name')];
},
markerIconTemplate: '<div class="fi-marker-container %6" data-workorder="%3"><a class="icon" style="color: %4;">%1%2</a></div><div class="fi-marker-pointer-container"><div class="fi-marker-pointer %6"></div></div>',
markerSelection: true,
displayLabels: mapLabels,
additionalMarkerMarkup: {
column: 'Status', /* Display additional Marker html pending on a column value */
values: {
'1': '<img class="top-right-icon" src="/Images/Icons/Help.png" />',
'2': '<img class="top-right-icon" src="/Images/Icons/CheckCircle.png" />',
'3': '<img class="top-right-icon" src="/Images/Icons/CheckCircle.png" />',
'4': '<img class="top-right-icon" src="/Images/Icons/CheckCircle.png" />',
'5': '<img class="top-right-icon" src="/Images/Icons/Warning.png" />'
},
columns: ["Workorder #"]
},
layer: new L.LayerGroup()
};


So, my question is as follows: If I have a marker object, how can I programmatically open its tooltip?

Answer

You could simply use marker.fire("mouseover"), using Leaflet built-in event management methods.

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

Comments