Infobox/Tooltips mit title

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Ein Tooltip ist ein kleines Pop-up-Fenster in Anwendungsprogrammen oder Webseiten. Es zeigt eine Beschreibung zu einem Element der grafischen Benutzungsoberfläche. Alternative Namen sind Quickinfo sowie Mouseover, da der Tooltip erscheint, wenn der Mauszeiger eine kurze Zeit unbewegt über dem entsprechenden Element verweilt.

Da es heute viele mobile Geräte gibt, die gar keine Maus mehr haben, sind solche Tooltips heute nicht unproblematisch. Bitte beachten Sie die weiter unten aufgeworfenen Fragen und überlegen, ob Sie nicht gleich eine zukunftssichere Varianten mit Popover wählen.

Tooltip, Touch und Zugänglichkeit

In vielen Artikeln werden Tooltips als beste Sache seit der Erfindung von geschnittenem Brot angepriesen. 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.

SELFHTML stellte 2002 im SELFHTML-Aktuell-Bereich einen CSS-Tooltipp vor [1] - auch im SELF-Wiki gab es mehrere CSS-basierte Beispiele, die die Funktionalität eines Tooltipps scheinbar erreichten, aber nur eingeschränkt zugänglich waren:

Sie haben jedoch einige gravierende Nachteile:

CSS-basierte Tooltips funktionieren nicht mit …

Empfehlung:
  • Vermeiden Sie Tooltips weitgehend.
    Nützliche Information sollte direkt auf dem Bildschirm erscheinen. Ist Information nicht wichtig genug um direkt angezeigt zu werden, kann sie in den häufigsten Fällen gleich ganz weggelassen werden.
  • Verwenden Sie Randfenster (sidebar), Fußnoten oder die neue Popover API.
  • Verlinken Sie vom Fließtext so groß wie möglich, damit Links auf mobilen Geräten zielsicher angeklickt werden können (keine (?)-Icons).
  • Integrieren Sie den Tooltip bei Formularen in das label des Eingabefelds oder verwenden Sie aria-Attribute um diese zu verknüpfen.
  • Stellen Sie sicher, dass Tooltips auch mit focus und touch-Ereignissen ausgelöst werden.

Das W3C gibt folgendes Beispiel für einen Tooltip mit aria-Attributen:

Beispiel
<div class="text">
    <label id="tp1-label" for="first">First Name:</label> 
    <input type="text" id="first" name="first" size="20" 
           aria-labelledby="tp1-label" 
           aria-describedby="tp1" 
           aria-required="false" />
    <div id="tp1" class="tooltip" role="tooltip" aria-hidden="true">
       Your first name is a optional
    </div>
</div>
Empfehlung: Heute gibt es für Infoboxen, Tooltips und andere popups die neue Popover API, mit der Sie dies ohne JavaScript erreichen: Hauptartikel: Infobox/Tooltips mit Popover

Tooltips mit dem title-Attribut

Das title-Universalattribut erzeugt beim Überfahren mit der Maus einen kleinen Standard-Tooltip. Sein Aussehen ist von den Grundeinstellungen des Browsers abhängig und kann nicht mit CSS gestylt werden.

Tooltip mit title-Attribut ansehen …
<h2 title="Jetzt schau ich mal, wie lange ich tippen kann ohne die Luft anzuhalten - Ja, auch bei Überschriften kann man ein title-Attribut verwenden. 
           Bei einer zu großen Textlänge brechen die Browser den Text um, 
           dies ist allerdings nicht für jeden Browser steuerbar.
           Manche Browser brechen den Text bei einem Zeilenumbruch im Code um.">
    Tooltips mit dem title-Attribut
</h2>
<img src="S-Logo-vektor.svg" title="Das ist ein Bild." alt="self-logo">
<p>Dieser Absatz enthält eine <abbr title="Abkürzung">Abk.</abbr> gefolgt von weiterem Text.</p>
<p>In der Textgestaltung beschreibt ein 
   <dfn title="dfn steht für Definition, also Erklärung">Absatz, lateinisch passus, 
    einen aus einem oder mehreren Sätzen bestehenden Abschnitt eines fortlaufenden Textes.
   </dfn>
</p>

<p>Zurück zum <a title="Hier geht’s zum Artikel …" href="Tooltips_mit_CSS">Artikel</a></p>

<q>Mehr dazu im 
   <cite title="Quellenangabe">
     <a href="https://wiki.selfhtml.org">Self-Wiki</a>
   </cite>
</q>

Sie können jedem Element ein title-Attribut geben. Bei einer zu großen Textlänge brechen die Browser den Text automatisch um, dies ist allerdings nicht für jeden Browser steuerbar. Manche Browser brechen den Text bei einem Zeilenumbruch im Code um oder verhalten sich so, als ob white-space: pre gesetzt wäre.

Elemente für Tooltips

Früher wurden Tooltips hauptsächlich als interne Verweise angelegt, da die Pseudoklasse :hover im IE6 nur bei Links funktionierte. Semantischer ist eine Verwendung dafür vorgesehener Elemente.

Für die Textauszeichnung im Fließtext gibt es folgende Elemente:

  • abbr für Abkürzungen und Akronyme
  • dfn für Definitionen
  • cite für Quellenangaben

Noch einfacher ist eine Verwendung von details, wobei das summary-Element als Begriff und ein Kindelement details p als Zusatztext verwendet wird.

Abkürzungen mit abbr

Das abbr-Element zeichnet einen Teil eines Fließtextes als Abkürzung, engl. abbreviation aus. Wenn die ausgeschriebene Langform im title-Attribut enthalten ist, wird sie bei :hover als Tooltip angezeigt.

Tooltip mit abbr-Element ansehen …
<p>Dieser Absatz enthält eine <abbr title="Abkürzung" >Abk.</abbr> gefolgt von weiterem Text.</p> <p>Dieser deutschsprachige Absatz enthält eine englischsprachige Abkürzung.<br /> <abbr lang="en" title="Intergovernmental Panel for Climate Change">IPCC</abbr> .

Im Beispiel ist ein Textabsatz notiert und innerhalb davon eine Abkürzung. Die Langform der Abkürzung wird im title-Attribut notiert.

Im zweiten Absatz erhält die englischsprachige Abkürzung ein passendes lang-Attribut.

Beachten Sie: Der hier erfolgte Sprachwechsel ist umstritten. Einerseits erhalten Hörer so die richtige Aussprache; andererseits erfolgt beim Sprachwechsel eine kurze Pause und ein Sprecherwechsel, der bei geläufigen Abkürzungen stärker irritiert.
Empfehlung: Adrain Roselli[2] und Heydon Pickering [3] empfehlen auf das abbr-Element zu verzichten!
Verwenden Sie abbr weder mit noch ohne Titel. Die Darstellung ist in den verschiedenen Browsern und unterstützenden Technologien nach wie vor uneinheitlich. Ein Teil der Benutzer wird immer einen Teil der Information vermissen.
Erklären Sie Abkürzungen, Akronyme, Initialismen usw. bei der ersten Verwendung und greifen Sie dann ruhig auf die verkürzte Form im Fließtext zurück.

Definitionen mit dfn

Mit dem Element dfn wird ein Teil eines Fließtextes als Definition (definition) oder als zu definierender Begriff ausgezeichnet.

Tooltip mit dfn-Element ansehen …
<p> <dfn>Auf diesem System gilt für den <strong>localhost</strong> die IPv4 Adresse <var>127.0.0.1</var> bzw. die IPv6 Adresse <var>::1</var> </dfn> </p> <p>Eine <dfn id="Definition">Definition</dfn>ist die paradigmatische Beschreibung eines Begriffs, einer Variable oder einer Sache. <!-- später im Text --> <a href="#Definition">Definitionen</a> können im weiteren Geltungsbereich des Begriffs, der Variable oder der Sache <em>nicht</em> verändert werden. </p> <dl> <dt> <dfn> <abbr title="World-Wide Web">WWW</abbr> </dfn> </dt> <dd>Das World-Wide Web (WWW) ist ein System verbundener Hypertext-Dokumente, die durch das <a href="#def-internet">Internet</a> erreichbar sind. </dd> </dl>

Im oberen Beispiel ist die gesamte Erklärung als Definition ausgezeichnet.

In den beiden folgenden Beispielen ist nur der Begriff mit dfn ausgezeichnet; die Erklärung selbst folgt im weiteren Verlauf.

Das letzte Beispiel verwendet eine Definitionsliste, in der der zu definierende Begriff im dt-Element, die Erklärung im dd-Element enthalten ist.

In den meisten Browsern wird Text innerhalb des dfn-Elements kursiv dargestellt.


Popup-Boxen

Das windows-Objekt und seine Methoden wurden früher zur Erzeugung weiterer Fenster gebraucht. Diese nannte man Popup-Boxen, wenn sie vor dem aktuellen Fenster erschienen, bzw. Popunder, die sich unsichtbar hinter dem Fenster befanden.[4]


Die Darstellung heutiger Browser hat sich gegenüber der Anfangszeit des Internets stark verändert. Anstelle einer Vielzahl von offenen Fenstern werden verschiedene Seiten innerhalb eines Fensters als Registerkarten (Tabs) angezeigt. Diese Tabs haben immer die Größe des Browserfensters.

Deshalb ist das klassische Popup mit vom Seitenautor festgelegter Größe, Position und Leistenkonfiguration mit tabbed browsing und dem Konzept moderner Browser nicht vereinbar. Die feste Größe, die unabhängig vom verfügbaren Viewport war, widerspricht dem Konzept des responsiven Designs.[5]

Im heutigen Web soll der Benutzer selber entscheiden, ob er Links im selben Tab, in einem neuen Tab oder einem neuen Fenster öffnet. Wenn er im selben Tab bleibt, ist der Zurück-Button die bequemste Möglichkeit zu einer Seite zurückzukehren.

Mehrere offene Fenster und Popup-Boxen verhindern dieses intuitive Bedienkonzept.

Heutzutage unterbinden moderne Browser oft das Öffnen neuer Fenster und machen so den Einsatz von Popups obsolet. Es gibt jedoch einige Alternativen, die ohne die Nachteile mehrerer Fenster auskommen.

Heutzutage werden Popups oft nicht mehr als neues Fenster, sondern als dokumentinterne Dialogfenster realisiert. Sie bleiben Bestandteil der Seite. Um eine Benutzerinteraktion zu betonen, öffnet sich ein modaler Dialog als Overlay in einer Ebene (layer), die über dem normalen Inhalt liegt. Dies blockiert in der Regel weitere Interaktion mit der dahinter liegenden Seite, und blendet sie auch visuell mehr oder weniger stark aus.


Quellen

  1. SELFHTML-Aktuell: Infobox von Jan Heinicke, 04.11.2002 (web.archive.org)
  2. Using abbr Element with title Attribute
  3. The abbr element (heydonworks.com) 7th August 2024
    So much of my time as a web developer has been spent hiding things away from users so they can later reveal them and so much of that time I should have just left things as they were. If you are looking for User Experience advice from me, it is this: stop hiding things behind tabs and in popups or inside attributes. Stop making users go looking for things!
  4. Nachteile von Popups (molily.de)
  5. SELF-Forum: Wenn Firefox -> mache PopUp größer! (status=no) 09.12.2005