CSS/Anwendung und Praxis/Tooltips mit CSS

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Dieser Artikel beschreibt die verschiedenen Möglichkeiten Tooltips zu erstellen und ihre jeweiligen Vor- und Nachteile.

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.

Tooltips mit dem title-Attribut[Bearbeiten]

Das Universalattribut title 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.

Beispiel 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[Bearbeiten]

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. Im Fließtext sollten Abkürzungen mit abbr, Definitionen mit dfn und Quellenangaben mit cite ausgezeichnet werden.

Tooltips mit CSS erstellen[Bearbeiten]

Sie können Tooltips auch selbst erstellen und frei gestalten.

klassische Variante mit zusätzlichem span-Element[Bearbeiten]

In der klassischen Variante wird die Erklärung in ein normalerweise ausgeblendetes span-Element eingefügt.

Beispiel
<p>Das 
   <dfn class="tooltip"> WWW
     <span role="tooltip">Unter 'WWW' (World Wide Web) versteht man das Internet.</span>
   </dfn>
   ist aus dem heutigen Leben nicht mehr wegzudenken!
</p>
Damit das span-Element dem dfn-Element zugeordnet wird, erhält es ein role-Attribut mit dem Wert tooltip.

Bei internen Textankern sahen Tooltips wie Links aus und wurden so gleich erkannt. In diesem Beispiel muss das dfn-Element erst so gestaltet werden, dass Benutzer es als Tooltip erkennen.

Beispiel ansehen …
.tooltip {
  color: #c32e04; 
  text-decoration: underline; 
  cursor: help; 
}
Um den Tooltip auch für andere Elemente zu ermöglichen, werden die Stilfestlegungen in einer Klasse .tooltip notiert:
  • die Textfarbe wird rot
  • der Begriff wird mit text-decoration wie ein Link unterstrichen
  • der Mauszeiger ändert sich, wenn er über dem Begriff schwebt

Ein- und Ausblenden[Bearbeiten]

Sobald der Anwender mit der Maus über den rot markierten Begriff schwebt, wird der Tooltip eingeblendet:

Beispiel ansehen …
.tooltip {
  position: relative;
}

.tooltip span[rel=tooltip] {
  display: none;
}

.tooltip:hover span[rel=tooltip] {
  display: block;  
  position: absolute; 
  bottom: 2em;
  left: -6em;
  width: 15em;
  padding: 0.5em;
  z-index: 100;
  color: #000; 
  background-color: #ffebe6;
  border: solid 1px #c32e04;
  border-radius: 0.2em;
}
Die im span enthaltene Erklärung erhält keine Klasse, sondern wird über ihren Attributwert [rel=tooltip] angesprochen.
Bei :hover wird der Wert auf display: block geändert. Dieses Blockelement wird mit position: absolute oberhalb des Begriffs über das schon Gelesene platziert.
Beachten Sie, dass Sie dem Elternelement ein position: relative geben müssen.

Fazit: Durch ein zusätzliches Element haben Sie einen Tooltip, den Sie nach eigenen Wünschen frei gestalten können. Nur in der Platzierung müssen Sie beachten, dass der Tooltip auch direkt am Rand platziert sein könnte und sich deshalb (teilweise) außerhalb des Viewports befindet.

In dieser Variante können Sie sogar Links und Grafiken einbauen.

elegante Variante mit Data-Attributen[Bearbeiten]

Sie können anstelle des title-Attributs ein frei wählbares Data-Attribut festlegen und mit dem Text für einen Tooltip versehen. Dieses kann dann mit CSS frei gestaltet werden.

Beispiel ansehen …
.tooltip {
  color: #c32e04; 
  text-decoration: underline; 
  cursor: help; 
}
<p>Das 
   <dfn class="tooltip" data-tooltip="Unter dem 'WWW' (World Wide Web) versteht man das Internet.">
     WWW
   </dfn> 
   ist aus dem heutigen Leben nicht mehr wegzudenken!
</p>

Pseudoelement für die Erklärung[Bearbeiten]

Um die im data-Attribut vorhandene Erklärung auslesen zu können, erzeugen Sie mit ::after ein Pseudoelement, dessen Inhalt Sie mit content angeben können. Die attr-Funktion liest nun den Wert des data-Attributs aus.

Beispiel ansehen …
[data-tooltip] {
    position: relative;
}
 
[data-tooltip]::after {
  content: attr(data-tooltip);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
 
  display: block;  
  position: absolute; 
  bottom: 1em;
  left: -6em;
  width: 15em;
  padding: 0.5em;
  z-index: 100;
  color: #000; 
  background-color: #ffebe6;
  border: solid 1px #c32e04;
  border-radius: 0.5em;  
}
 
[data-tooltip]:hover::after {
  opacity: 1;
}
Das dfn-Element wird hier nicht mit der Klasse .tooltip sondern mit dem Attributsselektor [ ] angesprochen.

Es erhält ein Pseudoelement, dem in der content-Eigenschaft durch die attr-Funktion der Inhalt des Data-Attributs zugewiesen wird.

Bei :hover wird die Deckkraft (opacity) von O (=durchsichtig) auf 1 (=deckend) gesetzt. Dies geschieht in einem weichen Übergang mit transition: opacity 0.5s;

Fazit: Sie haben sich das semantisch nicht notwendige span-Element gespart; können dafür aber nur Klartext und keine Verweise oder Grafiken in den Tooltip integrieren.

Sprechblasen mit einem weiteren Pseudoelement[Bearbeiten]

Sie können den Tooltip als Sprechblase gestalten, wenn Sie ein weiteres Pseudoelement verwenden:

Beispiel ansehen …
[data-tooltip]::before {
  content: "";
  position: absolute;
  display: block;	
  opacity: 0;
  transition: opacity 0.5s;
  bottom: 1.2em; 
  left: auto;
  right: 0; 
  border-width: 2em 1em 0;
  border-style: solid;
  border-color: #c32e04 transparent;
}
 
[data-tooltip]:hover::after, [data-tooltip]:hover::before{
  opacity: 1;
}
Das durch ::before erzeugte Pseudoelement hat keinen Inhalt und keine festgelegte Größe, aber einen 2em breiten Rahmen, der aber nur oben rot und sonst transparent ist. So wird ein rotes Dreieck erzeugt, das den Eindruck einer Sprechblase erweckt.

Tooltip, Touch und Zugänglichkeit[Bearbeiten]

In vielen Artikeln werden Tooltip als beste Sache seit der Erfindung von geschnittenem Brot angepriesen. Sie haben jedoch einige gravierende Nachteile:

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) oder Fußnoten
  • 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 sie 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>

Siehe auch[Bearbeiten]

weiteres Beispiel:

Weblinks[Bearbeiten]

Sprechblasen mit CSS: