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](https://wiki.selfhtml.org/wiki/HTML/Tutorials/dialog) geht es eigentlich mehr um das Öffnen und Schließen mit JavaScript. Problem ist, dass … * [Fixierte Tooltips mit :target](https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Fixierte_Tooltips.html) * [Tooltips mit :hover](https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:CSS-Anw-tooltip-6.html) 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**](https://wiki.selfhtml.org/wiki/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](https://developer.chrome.com/blog/introducing-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 > > ~~~ HTML > <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](https://wiki.selfhtml.org/wiki/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**](https://wiki.selfhtml.org/wiki/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 -- Jemand interessiert? Ein Freund von uns will zum Forumstreffen, und hat bereits Hotelübernachtungen gebucht. Er hat vergessen, dass er im gleichen Zeitraum auch heiratet. Also für Interessierte: Du könntest am 25. November um 14 Uhr im Rathaus von Hannover heiraten. Ihr Name ist Sandra.

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](https://wiki.selfhtml.org/wiki/HTML/Tutorials/dialog) geht es eigentlich mehr um das Öffnen und Schließen mit JavaScript. Problem ist, dass … * [Fixierte Tooltips mit :target](https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Fixierte_Tooltips.html) * [Tooltips mit :hover](https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:CSS-Anw-tooltip-6.html) 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. Dashalb 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**](https://wiki.selfhtml.org/wiki/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](https://developer.chrome.com/blog/introducing-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 > > ~~~ HTML > <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](https://wiki.selfhtml.org/wiki/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**](https://wiki.selfhtml.org/wiki/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 -- Jemand interessiert? Ein Freund von uns will zum Forumstreffen, und hat bereits Hotelübernachtungen gebucht. Er hat vergessen, dass er im gleichen Zeitraum auch heiratet. Also für Interessierte: Du könntest am 25. November um 14 Uhr im Rathaus von Hannover heiraten. Ihr Name ist Sandra.