Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make tooltips interactive themselves #7532

Merged
merged 4 commits into from
Feb 7, 2022
Merged

Conversation

johnd0e
Copy link
Collaborator

@johnd0e johnd0e commented Mar 28, 2021

mytooltip.on('click', ...


More ideas:

Close on preclick is not good..
Perhaps better something like this:

		if (!this.options.permanent) {
			events.tooltipopen = L.Util.bind(function (e) {
				if (e.tooltip !== this) { this._close(); }
			}, (this));
		}

Copy link
Member

@Falke-Design Falke-Design left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because of #7531 (comment):
The events on the tooltip is not working because of:

if (this.options.interactive) {
DomUtil.addClass(this._container, 'leaflet-clickable');
if (this._source) {
this._source.addInteractiveTarget(this._container);
}
}

it adds the interactiveTarget to the source and not to the layer self. This is fixed with this PR additionally it adds the event parent source which makes the changes not to a breaking change.

I came after my research to the exact same changes

src/layer/Tooltip.js Outdated Show resolved Hide resolved
src/layer/Tooltip.js Outdated Show resolved Hide resolved
@Falke-Design
Copy link
Member

And maybe this._source.fire('tooltipclose', {tooltip: this}, true); should be then fired on the tooltip self and with the event parent it is also fired on the source layer

src/layer/Tooltip.js Outdated Show resolved Hide resolved
Copy link
Member

@Falke-Design Falke-Design left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Next step to mark PR "ready for review"

@johnd0e
Copy link
Collaborator Author

johnd0e commented Nov 1, 2021

And maybe this._source.fire('tooltipclose', {tooltip: this}, true); should be then fired on the tooltip self and with the event parent it is also fired on the source layer

Please explain what you mean

@Falke-Design
Copy link
Member

With this._source.fire('tooltipclose', {tooltip: this}, true); the event tooltipclose is only fired on the source layer, but it would make sense to fire this on the tooltip too. So it should changed to this.fire('tooltipclose', {tooltip: this}, true);

@johnd0e
Copy link
Collaborator Author

johnd0e commented Nov 1, 2021

So it should changed to this.fire

No, it should fire on source layer - it is really intended so.

@johnd0e
Copy link
Collaborator Author

johnd0e commented Nov 1, 2021

Next step to mark PR "ready for review"

Next step is decide how to be with closing on preclick.

P.S.
And final step - describe possible use cases. Do you have some?

@Falke-Design
Copy link
Member

Falke-Design commented Nov 1, 2021

No, it should fire on source layer - it is really intended so.

But why? A tooltip can also be a own layer on the map, so why not fireing events on it? And with the event parent it still fires on the source layer.

		var tooltip = L.tooltip().setContent('Tooltip');
		map.openTooltip(tooltip, map.getCenter());
		
		tooltip.on('tooltipclose',(e)=>console.log('Tooltip',e));
		map.on('tooltipclose',(e)=>console.log('Map',e));

@johnd0e
Copy link
Collaborator Author

johnd0e commented Nov 1, 2021

But why? A tooltip can also be a own layer on the map, [...]

So it already has all related events ('remove', not 'tooltipclose')

@Falke-Design
Copy link
Member

Falke-Design commented Nov 1, 2021

So it already has all related events ('remove', not 'tooltipclose')

Ok yes sorry, you are right didn't thought about that one.

Next step is decide how to be with closing on preclick.

Ah sorry, didn't thought that you want to add this in this PR.
I don't think that the new function instead of preclick will be good, because it breaks current behaviour. It doesn't close anymore on click on the map or on the tooltip. It closes only if a new tooltip is open or closeTooltip() is called.

And final step - describe possible use cases. Do you have some?

I know that I had some usecase where I wanted to add a click listener on the tooltip. But I don't know for what exactly anymore.
Other usecases would be to make Tooltips dragable, specially if they are added as a own layer without "source". Or to make a "Click me to revert" Tooltip after removing a layer, ...

@johnd0e johnd0e marked this pull request as ready for review November 2, 2021 09:10
@johnd0e
Copy link
Collaborator Author

johnd0e commented Nov 2, 2021

It doesn't close anymore on click on the map or on the tooltip.

It will be easy to add too, but with clear map click.

Ah sorry, didn't thought that you want to add this in this PR.

But you are right, it is not necessary in this PR.

I know that I had some usecase

Me too)

Copy link
Member

@mourner mourner left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! How do we surface this in the docs?

@Falke-Design
Copy link
Member

Good point.

This section is missing:
image

@johnd0e
Copy link
Collaborator Author

johnd0e commented Nov 2, 2021

May be this way: 9251b80

@johnd0e johnd0e changed the title Tooltip events Make tooltips interactive themselves Nov 2, 2021
@Falke-Design
Copy link
Member

Falke-Design commented Nov 2, 2021

But then DivOverlay and Popup would be "marked" as interactive too, but the code is missing. popup.on('click',(e)=>console.log(e)) is not working.

var layer = new L.Marker(map.getCenter()).bindPopup('TEST').addTo(map);
layer.getPopup().on('click',(e)=>console.log(e))

https://jsfiddle.net/falkedesign/xqc9mbzd/

But in my eyes it would make sense to add interactive to DivOverlay too.

@johnd0e johnd0e marked this pull request as draft November 2, 2021 14:00
@johnd0e
Copy link
Collaborator Author

johnd0e commented Nov 2, 2021

Perhaps not every descendant of DivOverlay must to be interactive.
But I do not know if LeafDoc has ability to attach Interactive layer class 'in the middle', so..

@mourner @IvanSanchez
Ideas?

@Falke-Design
Copy link
Member

Falke-Design commented Nov 2, 2021

Perhaps not every descendant of DivOverlay must to be interactive.

if we add interactive to DivOverlay it would create new possibilities for plugins. Sure it can be added manually but why not make it easier for developers? What is the harm if we add it to DivOverlay? If a descendant should not support interactive it can be manually set to false in the onAdd but I think that is a rare usecase.

@johnd0e
Copy link
Collaborator Author

johnd0e commented Nov 2, 2021

@Falke-Design
Something like this?

@johnd0e johnd0e requested a review from Falke-Design November 3, 2021 16:52
Copy link
Member

@Falke-Design Falke-Design left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!

Good to know: click event will not fire on the Popup because of:

DomEvent.disableClickPropagation(container);

@johnd0e johnd0e force-pushed the tooltip-events branch 2 times, most recently from 5979213 to 04aa84d Compare November 7, 2021 16:15
@johnd0e johnd0e force-pushed the tooltip-events branch 4 times, most recently from 7172b7c to df66fe1 Compare November 7, 2021 16:56
@johnd0e
Copy link
Collaborator Author

johnd0e commented Nov 7, 2021

Good to know: click event will not fire on the Popup

Because of #7750.
May be fixed by #7751.

@Falke-Design Falke-Design added this to the 1.8 milestone Nov 26, 2021
@Falke-Design
Copy link
Member

@johnd0e can you please resolve the conflicts and mark the PR as ready for review. I would say we keep this PR in the 1.8.0 milestone, because it was already approved by @mourner and then it is a small task to check the changes since them and then merge it.

@mourner mourner marked this pull request as ready for review February 7, 2022 08:37
Copy link
Member

@Falke-Design Falke-Design left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mourner valid for me, the tests are covering all changes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants