Leaflet

Leaflet copied to clipboard

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

@Istador @mourner

That's the expected behavior.

The tooltipAnchor for the Icon of the default marker that is used is at [16, -28], so horizontally to the right of it and vertically in the middle of the head. {direction: 'left'} means that the tooltip should open to the left of the anchor, which it does.

The default marker uses the auto direction and not left, where it automatically inverts the x axis to the left of the marker if needed.

If you want to use another direction for the default marker, you should provide it with an offset:

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

Alternatively, you could also create another (default) Icon with a different default value for its tooltipAnchor

Why you think this is the right way? This is a big change for so many projects! And now every project have to edit their code for something what is for the most users so trivial. I can understand that this is a wanted feature but that all project now have to change their icons / options of the tooltip can't be right.

I'd argue that it was working incorrectly and inconsistently before. And that it's totally normal, with every dependency that you update that you might need to migrate/adopt your application to it.

But I do see that there's a potential need for this kind of behavior of inverted axes.

Maybe something like new directions: invertedLeft, invertedRight, invertedTop and invertedBottom, which invert the x- or y-axis for the anchor and the offset. Or new Boolean settings to invert: invertHorizontalAxis and invertVerticalAxis.

That's the expected behavior.

I think that highly depends on who you ask 😉. I'd also expect a direction change of the tooltip inverting it's position still looking "normal". Another way to think of it is that basically no one wants that:

so {direction: left} has to be used with an offset. Hence, it could be automated OR be part of the documentation.

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.

Lots of text for a tooltip 😅

That's the expected behavior.

I think that highly depends on who you ask :wink:.

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.

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

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

(I know I'm late to the party! :p )

This is the default behaviour now in Leaflet, and I think this is a wrong default:

I can understand that the previous behaviour (where Leaflet would revert x/y according to the position) was questionable, but I think we should provide a decent display when using tooltip without any customization. It should nicely work as is, and provide whatever customization options for people needed fine control.

In the screenshot, we can see that the right direction is nicely positioned, same for auto one, that goes to the left, but all other are awkward.

If we really want to be neutral, than maybe the tooltip position should be centered in the icon (on the white dot ?).

But I question the change itself: for me, it seems that the previous behaviour was working for a large majority of cases, because it seems to me that the majority of icons are symmetric, while now, even if the code itself is less magical, it seems also less user friendly.

So my preference would be to go back to the previous behaviour, and, indeed, better document it.

@yohanboniface no problem that you are late to the party 😄 I still see it like you and I would love to hear what the other maintainers are thinking. @IvanSanchez @mourner @jonkoops

If you ask me the tooltip on a marker with an image should be placed on the edges of the bounding box of the image. So if the tooltip is opened on the right-middle side of an image that is 48x48px, then I would expect the edge of the tooltip on the right side of the image halfway down (X-axis 48px and Y-axis 24px).

Basically, I would expect something like this.

@jonkoops this means like it was before 1.7.1?

Leaflet 1.9.4: https://plnkr.co/edit/VJfPLgjoKT3wQpRv

Leaflet 1.6.0: https://plnkr.co/edit/pF9AP4XSCf69Mqzu

this means like it was before 1.7.1?

Yes, I think that looks more accurate that what the behavior seems to be now.

I think we should provide a decent display when using tooltip without any customization

Using the direction property with a value other than auto is already a customization that derivates from the default.

If you ask me the tooltip on a marker with an image should be placed on the edges of the bounding box of the image. So if the tooltip is opened on the right-middle side of an image that is 48x48px, then I would expect the edge of the tooltip on the right side of the image halfway down (X-axis 48px and Y-axis 24px).

That might be a good default for icons where you don't specify a tooltipAnchor. But if tooltipAnchor is specified, then it should respect that setting. But even for the default marker that isn't fitting, because it is asymetic vertically (the head is at the top and not at its middle), so we can't remove the tooltipAnchor there.

In my opinion it's still the best option to add additional new values for the direction setting that also flip the tooltipAnchor to the other side as before or to add a new additional setting to configure the flip mechanic separately (which could even be enabled by default, as long as there is a way to disable it for special cases).

@jonkoops this means like it was before 1.7.1?

Leaflet 1.9.4: https://plnkr.co/edit/VJfPLgjoKT3wQpRv

Leaflet 1.6.0: https://plnkr.co/edit/pF9AP4XSCf69Mqzu

IMHO the screenshot shown for 1.6.0 is wrong and the one for 1.9.4 is correct.

The tooltipAnchor on the default icon is defined on the right side of it, and the tooltips are supposed to open at the point of the tooltipAnchor into the given direction. Only auto gets special treatment of inverting the axis based on the screen size realities.

Also notice how at 1.6.0 the settings top and bottom are inconsistent:

• bottom is centered horizontally and vertically goes to the bottom of the marker.
• top is also centered horizontally but doesn't move vertically to the top but stays on the same height.

That seems like a behavior that was tailored specifically for the default marker, where the tooltip with top is wanted to open in the white circle instead of at the top of it. But that is a terrible and inconsistent rule for all icons to enforce.

For asymmetic marker icons, something like "centering horizontally" or "inverting an axis" might not make any sense and will produce wrong results. There you have to provide the tooltipAnchor manually to be shown at the right point to be opened into the direction of your choice. See my example in PR #7155 with the Leaflet logo, where I want to have fine control over the position of the tooltip via tooltipAnchor and the direction to which it opens. Which was as far as I remember actually impossible to configure with the old version, without ditching tooltipAnchor completely, and calculating the offset manually for each tooltip using that icon (depending on the direction sometimes in an inverted coordinate space).