Servus! > Tatsächlich verwendet sogar [die HTML-Spec](http://www.w3.org/TR/html5/text-level-semantics.html#the-abbr-element) ein Beispiel, in dem die Elemente ganz ähnlich verwendet werden. Ich habe mich mal ein bisschen umgeschaut und gemerkt, dass alle Tooltips mit :hover arbeiten und deshalb nicht auf Touch-Geräten, bzw Screenreadern gehen. Welche Alternativen schlagt ihr vor? * Doch einen internen Link mit :target? * Popup-Boxen mit JS? Herzliche Grüße Matthias Scharwies

Servus! > Aloha ;) > > Bei allem Respekt, aber das > > > Auf der verlinken Seite? Nein. Die Elemente werden teilweise falsch verwendet beziehungsweise passen nur in diesem Beispiel. Korrekt wäre demnach eine Lösung mit span-Elementen. Die anderen Elemente dann wenn sie passen. > > ist mMn so irgendwie nicht hilfreich. Zumindest, wenn du das so ohne weitere Erläuterungen und Differenzierung hinstellst. Zielführender wäre es hier, konkret zu sagen, an welcher Stelle Elemente falsch verwendet werden und wie eine (gleichwertige) Alternative aussehen kann. Die Verwendung des title-Attribut, die du vorschlägst, dient zwar einem ähnlichen Zweck, ist aber sicher nicht gleichwertig - weder kann der Tooltip mittels title optisch an die Bedürfnisse der Seite angepasst werden, noch kann etwas anderes als Plain Text verwendet werden. Selbstverständlich kann man beim Bau einer Seite, trotz der Existenz von title, auch selbst eine Tooltip-Funktion einbauen, sofern dabei sinnvolles, semantisches Markup gewahrt bleibt - und das, ohne Benutzerfreundlichkeit zu verlieren. Tatsächlich *gewinnt* man hier sogar an Benutzerfreundlichkeit, da dieser Tooltip notfalls auch per Klick (bzw. Touch) geöffnet werden kann, und damit mobile-friendly ist (wie du ja auch schon sagtest) - ganz im Gegensatz zum title-Attribut, das nur auf Desktop-Browsern effektiv nutzbar ist. > > Tatsächlich verwendet sogar [die HTML-Spec](http://www.w3.org/TR/html5/text-level-semantics.html#the-abbr-element) ein Beispiel, in dem die Elemente ganz ähnlich verwendet werden. > > Prinzipiell ist nichts dagegen einzuwenden, `<dfn>` für einen Tooltip zu verwenden - immerhin liefert ein Tooltip grundsätzlich weitere Informationen zu einem Wort, stellt also eine Art Definition dar. Die Verwendung von `<abbr>` ist vielleicht etwas kritischer. Einerseits sollte `<abbr>` nicht, wie auf der verlinkten Seite, das `<dfn>` beinhalten - das ist semantisch nicht sinnvoll. Andererseits ist, wenn wir nicht gerade `CSS` oder `WHATWG` (also tatsächliche Abkürzungen) als Vorkommen im Text haben, auch nicht wirklich eine Abkürzung beteiligt - nicht bei jedem denkbaren, tooltip-fähigen Wort handelt es sich zwangsläufig um eine Abkürzung. Hier hast du also nicht unrecht, wenn du zu einer Verwendung des generischen span rätst (wobei wir sehen werden, dass wir dafür gar kein Element brauchen). Es ist allerdings dann trotzdem eine gute Idee, die Semantik mittels der zur Verfügung stehenden Werkzeuge in HTML5 aufrecht zu erhalten. > > Als Alternative, die gleichwertig eingesetzt werden kann, aber semantisch fehlerfreier ist, stelle ich mal folgendes Markup (auf der Grundlage der verlinkten Seite) zur Diskussion: > > ~~~~html > <p> > Mit > <dfn tabindex="0" class="quickinfo"> > CSS > <span role="tooltip"> > Cascading Stylescheets <br> > dienen zum Formatieren von Webseiten und sind der Schlüssel zum Erfolg. > </span> > </dfn> > lassen sich sehr einfach Tooltipps oder auch Quickinfos erstellen. > </p> > ~~~~ > > Wir haben also ein alles gruppierendes `<dnf>`-Element - das ist sinnvoll, denn sowohl die Definition als Text als auch das zu definierende Wort sind Teil einer Definition (und dass Tooltips immer eine Art der Definition im Sinne einer näheren Bestimmung sind, hatte ich schon dargelegt). Der Text der Definition, der später als Tooltip erscheinen soll, wird durch ein `<span>` umfasst, welches zum Ausgleich der semantischen Bedeutungslosigkeit über den [dafür vorgesehenen `role`-Attributwert](http://www.w3.org/TR/2014/REC-wai-aria-20140320/roles#tooltip) wieder Bedeutung erhält. > > Die CSS-Formatierung kann dann geschehen wie auf der verlinkten Seite gezeigt; einfach `attr.quickinfo` durch `dfn.quickinfo` ersetzen und statt > `abbr.quickinfo:hover dfn, abbr.quickinfo:focus dfn` ein > `dfn.quickinfo:hover span[role=tooltip], dfn.quickinfo:focus span[role=tooltip]` > einsetzen. > > Grüße, > > RIDER > > > Herzliche Grüße Matthias Scharwies