0

I'm trying to implement leaflet.draw-like behaviour on a map that also uses leaflet.draw (using Draw to drop markers, but then custom js to draw in routes). I would therefore like helpful tooltips on this custom drawing function to look like the draw tooltips.

How can I do so? I'm currently using jquery-ui v. 1.11.4 and I can't quite figure out to make the appearances the same. I found what the relevant section of css from leaflet.draw, but when attempting to use the tooltipclass property in the constructor as per below (from here), the two leaflet.draw class were added to the tooltip (and apparently overriden by existing jquery-ui class).

$( ".selector" ).tooltip({
  tooltipClass: ".leaflet-draw-tooltip .leaflet-draw-tooltip-single"
});

There seem to be two potential solutions:
1. Create my own instance of a leaflet.draw tooltip
2. Find a way to remove the conflicting CSS classes from the jquery-ui tooltip.

Community
  • 1
  • 1
raphael
  • 2,762
  • 5
  • 26
  • 55

1 Answers1

0

So the problem was that the leaflet.draw.css contained the following property:

visibility: hidden ;

So whenever I successfully applied the leaflet.draw CSS to the tooltip, it would vanish! (Kind of hard to debug).

So I created a class to override the visibility property and I added it to the tooltip declaration:

.j-leaflet-draw-tooltip{
    visibility: visible;
}

$( "#map" ).tooltip({
    tooltipClass: "leaflet-draw-tooltip leaflet-draw-tooltip-single
                   j-leaflet-draw-tooltip"
});
raphael
  • 2,762
  • 5
  • 26
  • 55