Stammtischdiskussionen über Popover und dialog

[Matthias Scharwies]

Guten Morgen,

wir hatten gestern Abend überlegt, ob die „starre“ Wiki-Einteilung in HTML, CSS und JS bei einem Element wie dialog überhaupt sinnvoll ist: Bereits bei HTML/Tutorials/dialog geht es eigentlich mehr um das Öffnen und Schließen mit JavaScript.

Problem ist, dass …

• Fixierte Tooltips mit :target
• Tooltips mit :hover

mit einer reinen CSS-Lösung vermeintliche Funktionalität ohne JS bieten sollten, JS ja aber eigentlich Benutzerinteraktionen ermöglichen und erleichtern soll. Anfänger - so wie ich 2008 - haben eine panische Angst vor „schwierigem Code“ und wollen lieber 200 Zeilen CSS produzieren, ohne zu einer funktionalen Lösung zu kommen.

Deshalb habe ich den Abschnitt mit :target depubliziert und das CSS-Tutorial mit einem ToDo versehen und an einen neuen Ort verschoben:

Infobox/Tooltips_mit_Popover

Popover

• https://open-ui.org/components/popover.research.explainer/
• https://developer.mozilla.org/en-US/docs/Web/API/Popover_API

Sehr gutes Tutorial mit vielen Beispielen:

• Introducing the popover API von Una Kravetz

The Popover API provides developers with a standard, consistent, flexible mechanism for displaying popover content on top of other page content. Popover content can be controlled either declaratively using HTML attributes, or via JavaScript.

bietet ein

<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>

Das ehemalige CSS-only-Tutorial habe ich mit einem ToDo versehen und es wird hoffentlich zeitnah umgebaut. So viel HTML wie möglich, so wenig JS wie nötig und CSS nur zum positionieren und gestalten!

Infobox/Tooltips_mit_Popover

dialog

Wir haben 2 dialog-Tutorials. @Felix Riesterer tendiert dazu, beide erst einmal getrennt zu lassen. Das Einstiegs-Tutorial habe ich aber ebenfalls verschoben:

• Infobox/modale_Dialogfenster

Hier muss noch ergänzt werden:

• Abgrenzung zu Popover
• modal versus nichtmodal
• Toplayer

#############

Wer Beispiele und Anregungen hat - immer her damit!

Herzliche Grüße

Matthias Scharwies