Mouse-following tooltips incorrectly appear on top left corner when first triggered

• I’m reporting a bug, not asking for help
• I’ve looked at the documentation to make sure the behaviour is documented and expected
• I’m sure this is a Leaflet Draw code issue, not an issue with my own code nor with the framework I’m using (Cordova, Ionic, Angular, React…)
• I’ve searched through the issues to make sure it’s not yet reported

---

How to reproduce

• Leaflet version I’m using: leaflet@1.3.1
• Leaflet Draw version I’m using: leaflet-draw@0.4.12
• Browser (with version) I’m using: Chrome 67.0.3396.99
• OS/Platform (with version) I’m using: macOS Sierra

1. Open a page with a tooltip that follows the user’s mouse
2. Press the button to trigger the mouse-following tooltip, then do stop moving the mouse
3. Observe that the tooltip first appears to the top left corner of the screen

What behaviour I’m expecting and which behaviour I’m seeing

I’m expecting the tooltip to 1) to not appear until the user moves the mouse into the diagram 2) appear next to the user’s mouse rather than at the top left corner.

Minimal example reproducing the issue

Demo of the issue on Leaflet.draw’s popup example in docs:

http://leaflet.github.io/Leaflet.draw/docs/examples/popup.html

• this example is as simple as possible
• this example does not rely on any third party code

[cydrobolt]

@rlarner-quizlet I actually reported this bug as part of my time at Quizlet. I remember closing the JIRA ticket as a wontfix because I wasn’t able to figure out a solution that did not involve making significant modifications to Leaflet.

If you can find the original JIRA ticket, I might’ve left some of my findings in the comments.

[agusterodin]

This is a little bit of a workaround but then again this library has been abandoned for nearly 3 years:

.leaflet-draw-tooltip {
  visibility: hidden !important;

.map:hover .leaflet-draw-tooltip {
  visibility: visible !important;
}