Unify tooltip and headline and add the corresponding icon

[jschleic]

Tooltips for all the buttons now match the headline on top of the dialogs (with #1449 the headings should probably also be filled from the new constants)

Added h3 heading in dialogs without any headline and re-arranged some h3 / h4 inconsistencies.

This PR separates out the first part of #1454 as separate PR.

[davidbgk]

What is the benefit of adding the same title as the content for a button element?

[jschleic]

The title attribute is shown as tooltip on hovering. The edit-buttons on the right already had tooltips, this line also adds tool tips for the search and share buttons on the left (that do not show the text, but only icons). Do you see any negative side effect for other text buttons?

[davidbgk]

Do you see any negative side effect for other text buttons?

If the content of the tooltip is the same as the displayed label of the button, I think it might confuse the user with extra visual information that is not really pertinent. In other places we tried to put additional informations in that case (like keyboard shortcuts or additional context) and there might still be some inconsistencies(?).

This is a thin line between helping the user and not overloading the interface 🤸

[jschleic]

If the content of the tooltip is the same as the displayed label of the button, I think it might confuse the user with extra visual information that is not really pertinent. In other places we tried to put additional informations in that case (like keyboard shortcuts or additional context) and there might still be some inconsistencies(?).

If that is the desired strategy, there are a lot of inconsistencies:

Most of the Close buttons already have same title and text:

umap/umap/static/umap/js/umap.ui.js

Lines 39 to 42 in 8ce09b0

	const closeLink = L.DomUtil.create('li', 'umap-close-link', actionsContainer)
	L.DomUtil.add('i', 'umap-close-icon', closeLink)
	const label = L.DomUtil.create('span', '', closeLink)
	label.title = label.textContent = L._('Close')

umap/umap/static/umap/js/umap.ui.js

Lines 104 to 105 in 8ce09b0

	const label = L.DomUtil.create('span', '', closeButton)
	label.title = label.textContent = L._('Close')

umap/umap/static/umap/js/umap.core.js

Lines 451 to 452 in 8ce09b0

	const label = L.DomUtil.create('span', '', closeButton)
	label.title = label.textContent = L._('Close')

All labels in edit forms seem to apply the strategy to set the same text and title:

umap/umap/static/umap/js/umap.forms.js

Line 72 in 8ce09b0

this.label.textContent = this.label.title = this.options.label

So for me the only inconsistency seemed to be the missing title for share and search buttons on the left, which I want to fix in this PR:

Would you be happy with a specific title for those buttons on the left? Then I'll replace

umap/umap/static/umap/js/umap.core.js

Line 328 in e020a36

el.title = content

with individually setting for those buttons:

    shareButton.title = L._('Share, download and embed this map')

[davidbgk]

If that is the desired strategy, there are a lot of inconsistencies

Fair enough 😅

I would say that is not blocking for that PR, let's do that as a future step toward cohesion 👍

[jschleic]

Thank you!