SELF-Wiki: Popover

[Matthias Scharwies]

Guten Morgen,

Heute morgen im SELF-Blog: Popover ohne Programmieren!

Es soll das Tutorial zur neuen Popover-API vorstellen^[1]:

Infobox/Tooltips mit Popover

Beispiele imho ganz ok, aber könnte jemand mal drüber schauen? (peer review, anyone?)

Wir verlinken mehrfach auf den Begriff Top-Layer in der MDN. Wo sollte das bei uns hin? In den Glossar-Artikel Stapelkontext? in das z-index-Tutorial?

Für eine Positionierung der Tooltips brauch ich das ganz neue Anchor Positioning, das nur im Chrome Canary läuft. Es gibt einen Polyfill, aber bisher hat SELFHTML so neue Sachen nicht gezeigt.

Das hol' ich nach, versprochen!

Infobox/modale Dialogfenster

Das alte HTML/Tutorials/dialog ergänzt nun das Popover-Tutorial.

Ist die Frage modal oder nicht-modal hier ausreichend erklärt?

Infobox/Akkordeon mit details

Hier habe ich die bestehenden Tutorials aus dem HTML - und CSS- Bereich zusammengelegt. Die JS-Variante eines exklusiven Akkordeons wird irgendwann durch eine native Version der open-ui.org ersetzt.

ToDo: Bilder_präsentieren

Da müssen wir ran - das ist alles so 2014! Evtl. können wir da am SELF-Treffen am Sonntagmorgen überlegen, was und wie wir das Thema erklären wolen.

Infobox

Aus einem Glossar-Artikel mit vielen unübersichtlichen Links wurde nun eine Portalseite. Mit dem Namen hatte ich ursprünglich Probleme, aber eine gute Übersetzung für disclosure widget habe ich immer noch nicht.

Selbst ich hatte im Laufe der letzten Wochen einige Tutorials erst auf den 2. Blick gefunden - hoffentlich ist es jetzt besser!

Herzliche Grüße

Matthias Scharwies

---

1. neue HTML-Elemente accordion, popover und selectlist
   Hier hatten wir schon diskutiert, jetzt soll's um die Wiki-Artikel gehen. ↩︎

[Auge]

Hallo

Infobox/modale Dialogfenster

Das alte HTML/Tutorials/dialog ergänzt nun das Popover-Tutorial.

Ist die Frage modal oder nicht-modal hier ausreichend erklärt?

Also abgesehen davon, dass du hier den Abschnitt „Öffnen und Schließen mittels Javascript“ und nicht „modal oder nichtmodal?“ verlinkt hast ^[1], finde ich die Erklärung nicht erklärend. Du schreibst zwar, dass das ein Problem ist, aber nicht wirklich, warum. Meiner Meinung nach erklärt „Es gibt nichts Schlimmeres als auf der Suche nach Informationen erst ein Cookie-Banner wegklicken zu müssen, um dann nicht auf der Webseite selbst, sondern auf der Newsletter-Anmeldung hängenzubleiben.“ nicht genug, was daran das Problem ist.

Ich weiß allerdings auch nicht, wie man kurz und knapp erklärt, dass das (eventuell wiederholte) Wegklickenmüssen irgendwelcher Dialoge nervt. Jedenfalls nicht, wenn diese Erklärung sprachlich einigermaßen neutral bleiben soll.

Weiter oben auf der Seite ist mir im HTML-Quelltext des Beispiels im Abschnitt „dialog - ein Offenlegungs-Widget“ ein Syntaxfehler im HTML-Quelltext aufgefallen. Es gibt da (Stand jetzt, 2023-10-27 14:50) zwei öffnende, ineinander geschachtelte Tags dialog.

Ich habe da auch gleich zwei Typos ^[2], die mich ansprangen, behoben.

Infobox/Akkordeon mit details

Hier habe ich die bestehenden Tutorials aus dem HTML - und CSS- Bereich zusammengelegt. Die JS-Variante eines exklusiven Akkordeons wird irgendwann durch eine native Version der open-ui.org ersetzt.

Das ist sprachlich noch nicht fertig?

Der erste Satz unter der Überschrift „Exklusives Akkordeon“ lautet „beim Öffnen andere Elemente schließen ==== In diesem Beispiel werden drei details-Elemente in einem div gruppiert.“ Ich vermute, da ist die Formatierung einer Zwischenüberschrift verschütt gegangen?

Tschö, Auge

---

1. Etwas, was mich erst einmal verwirrt hatte. ↩︎

2. Oder doch „Typen“ als generischer Plural? 😁 ↩︎

[Matthias Scharwies]

Servus!

Hallo

Infobox/modale Dialogfenster

Das alte HTML/Tutorials/dialog ergänzt nun das Popover-Tutorial.

Ist die Frage modal oder nicht-modal hier ausreichend erklärt?

Also abgesehen davon, dass du hier den Abschnitt „Öffnen und Schließen mittels Javascript“ und nicht „modal oder nichtmodal?“ verlinkt hast ^[1], finde ich die Erklärung nicht erklärend. Du schreibst zwar, dass das ein Problem ist, aber nicht wirklich, warum. Meiner Meinung nach erklärt „Es gibt nichts Schlimmeres als auf der Suche nach Informationen erst ein Cookie-Banner wegklicken zu müssen, um dann nicht auf der Webseite selbst, sondern auf der Newsletter-Anmeldung hängenzubleiben.“ nicht genug, was daran das Problem ist.

Ich weiß allerdings auch nicht, wie man kurz und knapp erklärt, dass das (eventuell wiederholte) Wegklickenmüssen irgendwelcher Dialoge nervt. Jedenfalls nicht, wenn diese Erklärung sprachlich einigermaßen neutral bleiben soll.

Da muss ich noch mal hirnen! Danke!

Weiter oben auf der Seite ist mir im HTML-Quelltext des Beispiels im Abschnitt „dialog - ein Offenlegungs-Widget“ ein Syntaxfehler im HTML-Quelltext aufgefallen. Es gibt da (Stand jetzt, 2023-10-27 14:50) zwei öffnende, ineinander geschachtelte Tags dialog.

Ah, danke! Ist entfernt!

Ich habe da auch gleich zwei Typos ^[2], die mich ansprangen, behoben.

Vielen Dank!

Infobox/Akkordeon mit details

Hier habe ich die bestehenden Tutorials aus dem HTML - und CSS- Bereich zusammengelegt. Die JS-Variante eines exklusiven Akkordeons wird irgendwann durch eine native Version der open-ui.org ersetzt.

Das ist sprachlich noch nicht fertig?

Der erste Satz unter der Überschrift „Exklusives Akkordeon“ lautet „beim Öffnen andere Elemente schließen ==== In diesem Beispiel werden drei details-Elemente in einem div gruppiert.“ Ich vermute, da ist die Formatierung einer Zwischenüberschrift verschütt gegangen?

Genau, vielen Dank! Das besser ich noch aus!

Tschö, Auge

Herzliche Grüße und ein schönes Wochenende!

Matthias Scharwies

---

1. Etwas, was mich erst einmal verwirrt hatte. ↩︎

2. Oder doch „Typen“ als generischer Plural? 😁 ↩︎

[nix]

Ich find’s toll, auch wenn das jetzt einige Arbeit für mich mit bringt!

Nur eine Kleinigkeit hätte ich, wenigstens fürs Erste: unter „mehrere Popover anzeigen“ könnte man vielleicht auch noch, zwecks Unterscheidung, „ein Exemplar manual“ unterbringen.

Ich hab’ da, für diesen Zweck, beim „Ausprobieren“ einfach mal

<button popovertarget="additional-info3"> → Popover A</button>
<div id="additional-info3" popover=auto>
	<h4>Zusatz-Info A</h4>
	<p>In einem HTML-Element können noch weitere Informationen präsentiert
		werden.
		<p>
			<button popovertarget="additional-info3" popovertargetaction="hide" class="close-btn">
			<span aria-hidden="true">X</span> <span class="sr-only">Schließen</span> </button>
</div>

eingefügt …