Unexpected change in behavior of tooltips with direction option

In the newest Version of Leaflet 1.7.1 the Tooltips are not displayed correct, if a direction is set.

To reproduce: Go to: https://leafletjs.com/examples/quick-start/example.html And add this in the console:

var marker = L.marker([51.52,-0.092]).addTo(mymap)
marker.bindTooltip('TEST', {
  direction: 'left'
}).openTooltip()

The Tooltip should completly displayed on the left side of the marker but it is starting on the right side and then goes to the left side.

I think it has something to do with: #7155

[Captain-FLAM]

If you want to get back to old behaviour just like me, use this :

L.Icon.Default.prototype.options.tooltipAnchor = [0, 0];

[Istador]

That’s the expected behavior.

I think that highly depends on who you ask 😉.

Yes, that’s subjective like everything is.

I think it should be the way it is now, because otherwise tooltipAnchor and offset are both working with inverted x coordinates when using {direction: 'left'}. That is very confusing, especially when working with custom asymmetric icons.

That {direction: 'left'} changes the behavior of these two other features is undocumented. Also, if that were the wanted default behavior, it should also apply similar to top/bottom to be consistent.

From a point of what setting is where at which element it also makes sense. tooltipAnchor is a setting of the Icon, not of the Tooltip. The Icon is saying: these are the (relative) coordinates of the tooltipAnchor. direction says in which direction it is opening this tooltip (relative to that anchor). It should not manipulate the coordinates of the anchor, because that’s what offset is there for.

---

so {direction: left} has to be used with an offset.

Not necessarily. If you use a icon that has a tooltipAnchor at the left side of the icon, you don’t have to use an offset at all.

For that use case I personally would like to have a default tooltipDirection setting for the Icon itself that can be overwritten by the Tooltip.

But yes, if you do have a icon that has a tooltipAnchor at the right, then you have to provide an offset to move the anchor to the left when you want to use { direction: 'left' }. The same is the case for { direction: 'top' } and { direction: 'bottom' }, you have to provide an offset if you want the anchor at another position. Why should { direction: 'left' } be different / special?

---

I haven’t dug into the code yet but I could also imagine that the anchor could just be centered and have a default offset. So {direction:left} would just invert the offset.

The Icon is centered to the iconAnchor. We already have the two offsets for tooltips that are relative to the iconAnchor:

• tooltipAnchor at the icon level
• and offset at the tooltip level.

We also have the other icon offset popupAnchor, and this is where direction struck me. Because I was defining popupAnchor and tooltipAnchor to be at the same point for a few dozens different asymmetrical icons. But the direction was changing the tooltipAnchor, so that the Popups and Tooltips weren’t opening at the same point anymore.

Having { direction: 'left' } inverting the axis would be a convenient way for your use case, but that IMHO should not be part of left itself but a separate setting (e.g. { direction: 'invertedLeft'} or { direction: 'left', invertHorizontalAxis: true } as mentioned in my last comment), because it’s inconsistent with the other directions and complicates the usages of tooltipAnchor and offset.

---

If, against my preference, the default of left should be inverting, then the documentation needs to be changed, and we’d need a way to disable this behavior (e.g. {direction: 'left'} implies { invertHorizontalAxis: true } and can manually be disabled by setting { direction: 'left', invertHorizontalAxis: false } together):

1.) Icon Options

tooltipAnchor | Point | [0, 0] | The coordinates of the point from which tooltips will "open", relative to the icon anchor.

Adding: when the tooltip is using { direction: 'left' }, the x coordinate of tooltipAnchor is inverted.

2.) Tooltip

Note about tooltip offset. Leaflet takes two options in consideration for computing tooltip offsetting:

* the offset Tooltip option: it defaults to [0, 0], and it's specific to one tooltip. Add a positive x offset to move the tooltip to the right, and a positive y offset to move it to the bottom. Negatives will move to the left and top.
* the tooltipAnchor Icon option: this will only be considered for Marker. You should adapt this value if you use a custom icon.

Adding { direction: 'left' } to that list.

3.) Tooltip Options

offset | Point | Point(0, 0) | Optional offset of the tooltip position.

Adding: when the tooltip is using { direction: 'left' }, the x coordinate of offset is inverted.