Tooltips ohne JavaScript

erstellt am: 27.04.2012 | von: Andreas Schrottenbaum | Kategorie(n): CSS3

Möchte man zu einem In der Regel handelt es sich bei den Elementen um LinksElement noch zusätzliche Informationen darstellen, wenn der Besucher über dieses mit der Mouse fährt, eignen sich Wie dieser hierTooltips.

Wie solche Tooltips ganz ohne JavaScript realisiert werden, wird in folgendem Tutorial beschrieben.

Letztens gab es auf T3N einen Artikel wo eine ganz ähnliche Technik genauer beschrieben steht. Der Beitrag ist auf jeden Fall einen Blick wert.

Der große Vorteil in der dort beschriebenen Technik ist, dass das HTML-Markup sehr übersichtlich ist, da das dort verwendete Verfahren auf das data-* aufbaut. Leider unterstützen die Browser aktuell keine transitions und transforms auf Elemente, die in CSS mit :before und :after hinzugefügt werden, was dazu führt, dass die Tooltips nur ein-/ausgeblendet werden können. Ohne Überblend-Effekt und sonstiges Bling-Bling. Des weiteren kann kein HTML-Code dargestellt werden.

Diese beiden Defizite werden im folgenden Tutorial umgangen.

Zuerst zum Markup:

HTML:

1
2
3
4
5
6

<a href="javascript:void(0);" class="trigger">
  <span class="tooltip">
    Hier ist der Text vom Tooltip
  </span>
  der verlinkte Text
</a>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

.trigger {
  position: relative;
}
 
.trigger .tooltip {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  top: -250%;
  white-space: nowrap;
  background: #777;
  padding: 5px 15px;
  border-radius: 5px;
  -o-transition: all .4s ease;
  -o-transform: scale(.2,.2);
  -moz-transition: all .4s ease;
  -moz-transform: scale(.2,.2);
  -webkit-transition: all .4s ease;
  -webkit-transform: scale(.2,.2);
  transition: all .4s ease;
  transform: scale(.2,.2);
}
 
.trigger .tooltip:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: #777;
  top: 100%;
  left: 10px;
}
 
.trigger:hover .tooltip {
  -o-transform: scale(1,1);
  -moz-transform: scale(1,1);
  -webkit-transform: scale(1,1);
  transform: scale(1,1);
  opacity: 1;
  visibility: visible;
}

Wie bereits erwähnt, ist das HTML-Markup nicht ganz so schön, als wäre der Inhalt des Tooltips einfach als data-* Attribut definiert.

Zum CSS

.trigger { position: relative; }
Damit der Tooltip korrekt dargestellt wird, ist eine Relative Positionierung vom Ankerpunkt notwendig
Zeile 5-22 (.trigger .tooltip { … })
Hier wird das Aussehen vom Tooltip definiert (Positionierung, Hintergrundfarbe, Padding, etc.).

Des weiteren wird opacity auf 0 gesetzt und die visibility auf hidden. Das bringt denselben Effekt wie display:none;, mit dem Unterschied, dass ein Switch von display:none; auf display:block alle definierten Übergänge (transitions) die definierten Überblendungen nicht darstellt.

Anschließend wird der Überbendungs-Effekt noch jeweils mit den entsprechenden Vendor-Prefixes definiert.

Zeile 24-33 (.trigger .tooltip:before { … })
Hier wird der Pfeil für den Tooltip definiert. Auf net.tutsplus.com ist ein sehr ausführliches Tutorial, das das Erstellen von Dreiecken mittels CSS definiert. Kurz: es wird ein Element mit 0 Breite und Höhe erstellt, diesem ein Rahmen mit entsprechender Breite zugewiesen wo aber nur der obere Rahmen eine Farbe hat.
Zeile 35-42 (.trigger:hover .tooltip { … })
Abschließend wird noch das Aussehen definiert, den der Tooltip haben soll, wenn der User mit der Mouse über den Trigger fährt.

Das war’s auch schon.

Diese Technik hat leider den Nachteil, dass nur einzeilige Tooltips erstellt werden können. Da die calc()-Funktion in CSS noch nicht verfügbar ist (geschweige denn auch in allen Browsern verlässlich funktioniert), gibt es keinen wirklich sauberen Weg mehrzeilige Tooltips zu erstellen.

Ein möglicher Ansatz wäre, mit festen Größen und den Attributen display:table-cell;vertical-align:middle; zu Arbeiten, was jedoch auch in bestimmten Situationen zu Problemen führen kann. Es muss also jeder für sich entscheiden, welche Technik am besten geeignet ist.

Zur Not kann man ja immer noch auf JavaScript-Lösungen zurückgreifen ;) .

Viel Spass beim coden

Kommentar schreiben

Kommentar