Allgemeines Generieren von CSS Tooltips

Die CSS Tooltips die wir hier vorstellen werden beruhen auf zwei grundlegenden CSS Eigenschaften.
Zum einen der Pseudoclass :hover und zum anderen der Möglichkeit Content zu verstecken mithilfe von display: none; oder hohen negativen margins: margin-left: -99999px;.

Wir konstruieren uns ein einfaches Beispiel:
<p>Ein bisschen Text und ein kurzer <a href="#">Link</a></p>

Wir möchten nun wenn die Maus über dem Link schwebt, (siehe engl. "hover"), in einem kleinen Tooltip eine zusätzliche Information anzeigen.
Dafür betten wir innerhalb der a-tags für den Hyperlink (href => hypertext-reference) einen Text in tags ein.
Dafür bieten sich <span> oder <em> an.

Das ganze sieht dann z.B. so aus:
<p>Ein bisschen Text und ein kurzer <a href="#">Link<span>Hier geht es nirgendwo hin</span></a></p>

Nun wollen wir den Inhalt des <span> jedoch erst einmal unsichtbar haben und erst dann darstellen, wenn wir mit der Maus über den Link fahren.
Dank CSS nichts leichter als das: Wir sagen im CSS einfach folgendes: a span {display: none;} und machen es beim "hovern" sichtbar mit a:hover span {display: block;}.

Auf geht's:


Ein bisschen Text und ein kurzer LinkHier geht es nirgendwo hin ! und dann noch ein bisschen mehr Text, damit es sich auch lohnt.

CSS
a span {display: none;}
a:hover span {display: block;}

XHTML
<p>Ein bisschen Text und ein kurzer<a href="#"> Link <span>Hier geht es nirgendwo hin !</span></a> und dann noch ein bisschen mehr Text, damit es sich auch lohnt.</p>

Uuups, das wollten wir allerdings nicht, dass der auftauchende Tooltip-Text jetzt den anderen Inhalt wegschiebt.
Lösung ?, nun wir positionieren den Inhalt des <span>-tags einfach absolute, was ihn, wie alle wissen die sich ein wenig mit CSS auskennen, aus dem normale Textfluss oder auch Container-Fluss herausnimmt und bezogen auf die z-Achse über dem folgenden oder umgebenden Text darstellt.

Tut er das wirklich, über allen anderen Inhalten liegen ?
Vorerst ist die Antwort ja, wir kommen später noch zu Sonderfällen und Problemen.
Um den Inhalt des <span>-tags absolute zu positionieren muß ein Elternelement ebenfalls positioniert sein, um der absoluten Position auch einen Bezug zu geben (ansonsten würde der Bezug das html- oder body- Element sein, was nicht sinnvoll für eine genaue Positionierung im Textfluss ist).
Naheliegend ist hier natürlich dem <a>-tag eine Positionierung zu geben.
Sinnvollerweise vergeben wir gleich auch eine Klasse für den <a>-tag, um ihn so genau über CSS ansprechen zu können, also:


Ein bisschen Text und ein kurzer LinkHier geht es nirgendwo hin ! und dann noch ein bisschen mehr Text, damit es sich auch lohnt.

CSS
a.tooltip {position: relative;}
a.tooltip span {display: none;}
a.tooltip:hover span {
display: block;
position: absolute;
left: 0; top: 0;
margin: 20px 0 0;
}

XHTML
<p>Ein bisschen Text und ein kurzer<a class="tooltip" href="#"> Link <span>Hier geht es nirgendwo hin !</span></a> und dann noch ein bisschen mehr Text, damit es sich auch lohnt.</p>

Das sieht doch schon besser aus...
Gut, da fehlt noch etwas, ein Hintergrund, ein Rahmen und natürlich definierte Maße wären nicht schlecht.
Wir haben den Tooltip erst einmal auf der y-Achse unter den Link positioniert, später schauen wir uns an was da noch geht.
Den Abstand nach oben haben wir durch eine margin-top realisiert, wir hätten aber ebensogut die Position mit dem Wert für top definieren können und das sogar in Prozent. Dazu später mehr.
Nun also erst einmal ein bisschen Design, schließlich handelt es sich ja um ein Element, welches wir stylen können.
Absolute positionierte Elemente, auch wenn Sie vorher inline-elements waren, werden zu block-level-elements, für die die es nicht wissen. Das kommt später noch zum tragen, stylen könnten wir natürlich auch ein inline-element.
Also los:


Ein bisschen Text und ein kurzer LinkHier geht es nirgendwo hin ! und dann noch ein bisschen mehr Text, damit es sich auch lohnt.

CSS
.tooltip {position: relative;}
.tooltip span {display: none;}
.tooltip:hover span {
display: block;
position: absolute;
left: 0; top: 0;
margin: 20px 0 0;
width: 200px; color: #D3A7A7;
border: 2px solid #00ACE6;
padding: 4px;
background: #4B4B4E;
}

XHTML
<p>Ein bisschen Text und ein kurzer<a class="tooltip" href="#"> Link <span>Hier geht es nirgendwo hin !</span></a> und dann noch ein bisschen mehr Text, damit es sich auch lohnt.</p>

Gut, gebe zu, ist ein bisschen bunt aber es geht ja hier um das Prinzip, um die Technik.
Wir haben dem <span>-tag nun eine Hintergrundfarbe, einen Rahmen und ein padding gegeben, damit der Text nicht am Rahmen klebt.
Auch haben wir dem Text in der Tooltip-Box eine Farbe gegeben.
Der Fantasie, (und natürlich dem Geschmack ;-) ), sind keine Grenzen gesetzt.
Wir haben auch die CSS Deklarationen etwas verallgemeinert, sodass wir der tooltip Klasse nicht mehr das a voranstellen und somit flexibler werden, da die Klasse nun auch auf andere Elemente angewendet werden kann.
Was uns aber jetzt einmal interessiert ist, ob die Tooltip-Box, welche ja eigentlich mal ein gewöhnliches <span> inline-element war, nun wirklich über dem den Link umgebenden Inhalten liegt.
Dazu generieren wir einfach ein bisschen mehr Text, damit die Box etwas hat worüber sie liegen kann:

 


Ein bisschen Text und ein kurzer LinkHier geht es nirgendwo hin ! und dann noch ein bisschen mehr Text, damit es sich auch lohnt. Und wie versprochen, noch mehr Text und dann noch viel mehr Text, ja geradezu unglaublich viel Text.

CSS
.tooltip {position: relative;}
.tooltip span {display: none;}
.tooltip:hover span {
display: block;
position: absolute;
left: 0; top: 0;
margin: 20px 0 0;
width: 200px; color: #D3A7A7;
border: 2px solid #00ACE6;
padding: 4px;
background: #4B4B4E;
}

XHTML
<p>Ein bisschen Text und ein kurzer<a class="tooltip" href="#"> Link <span>Hier geht es nirgendwo hin !</span></a> und dann noch ein bisschen mehr Text, damit es sich auch lohnt. Und wie versprochen, ....</p>

Test positiv, auch im IE7, was uns schon einmal vor Kopfschmerzen bewahrt.
Im nächsten Schritt werden wir den Tooltip leicht verändern indem wir ihn auf ein normales <span>-Element anwenden und nicht mehr auf einen Hyperlink, ein <a> .
Dies zur Demonstration der Flexibilisierung, weswegen wir auch im vorliegenden Schritt die CSS Klasse so definiert haben .tooltip, also allgemein auf alle Elemente anwendbar, die diese Klasse im XHTML zugeordnet bekommen.
Auch werden wir den Text noch ein wenig verlängern und einen zweiten Tooltip einfügen, um zu prüfen, ob auch dieser von dem höher gelegenen Tooltip überdeckt wird.
Später werden wir uns noch mit verschiedenen Positionen der Tooltip-Box beschäftigen.

Schauen wir uns also erst zwei untereinanderliegende Tooltips an:

 


Ein bisschen Text und ein wenig InformationLeider keine Info vorhanden ! und dann noch ein bisschen mehr Text, damit es sich auch lohnt. Und wie versprochen, noch mehr Text und dann noch viel mehr Text, ja geradezu unglaublichNa soviel Text ist es nun wieder auch nicht. viel Text. Und noch ein bisschen mehr, auch wenn es nicht sonderlich sinnvoller Text ist.

CSS
.tooltip {
position: relative;
border-bottom: 1px dotted #C20; cursor: help;
}
.tooltip em {display: none;}
.tooltip:hover em {
display: block;
position: absolute;
left: 0; top: 0;
margin: 20px 0 0;
width: 200px; color: #D3A7A7;
font-style: normal;
border: 2px solid #00ACE6;
padding: 4px;
background: #4B4B4E;
}

XHTML
<p>Ein bisschen Text und ein wenig<span class="tooltip"> Information <em>Leider keine Info vorhanden !</em></span> und dann noch ein bisschen mehr Text, damit es sich auch lohnt. Und wie versprochen, ....ja geradezu <span class="tooltip">unglaublich<em>Na soviel Text ist...</em></span> viel Text. Und noch ein bisschen mehr,....</p>

Wer aufmerksam gelesen hat, hat es schon geahnt. Der untere Tooltip-Container, hier also unser den Tooltip bergendes <span>-Element, scheint durch den oberen Tooltip hindurch. Wie kommt das ? Wir wollen unseren Tooltip ja flexibel einsetzen und es kann ja vorkommen, dass genau soetwas passiert, weil eben zwei Tooltips dicht beieinander liegen oder eine Tooltip-Box auch mal mehr Informtionen birgt und deshalb grösser ist.

Wie jeder selbst durch Tests feststellen kann, geschieht dieses Durchscheinen nicht, wenn wir lediglich einen Link an der zweiten Stelle haben welcher keinen Tooltip beinhaltet. Am Link an sich kann es also nicht liegen, zumal wir hier ja auch schon einen Schritt weiter waren und gar keinen Link benutzt haben sondern ein normales inline-element, eben ein <span> .

Versuchen wir zu verstehen:
In einem noch zu schreibenden Blog-Post werde ich das Thema des sog. stacking-context, welches bei vielen unverstanden ist, analytisch betrachten.
Dies würde hier zu weit führen. Fest steht jedoch, dass unser Browser offensichtlich den unteren Tooltip-Container, unser <span class="tooltip">unglaublich<em>Na soviel Text ist...</em></span> als in dem Stapel-Kontext (stacking-context) höher angeordnet ansieht.

Sollte sich ein geneigter Leser ein wenig mit stacking-context auskennen, so müsste ihn die genannte Tatsache wundern, was es auch mich tat, wundern.
Es handelt sich immerhin bei dem durchscheinenden Element um lediglich ein inline-element, welches im stacking-context eigentlich unter einem absolute positionierten Element liegen müsste.
(Für die die nicht mehr mitkommen: Der stacking-context beschreibt die Reihenfolge der Darstellung von Elementen auf einer gedachten z-Achse (daher im CSS die Eigenschaft z-index), also welches Element über oder unter welchem liegt.)

Die Tatsache, dass unser <span>-Element ein absolute poitioniertes <em>-Element birgt scheint zu bewirken, dass das gesamte <span>-Element rückwirkend als absolute positioniert gilt, obwohl diese Positionierung doch erst durch ein :hover hervorgerufen wird und
- und das ist augenscheinlich -
die anscheinend rückwirkende absolute Positionierung auch nicht sichtbar ist, denn sonst würde der sichtbare Text (ohne :hover) im span, also das Wort "unglaublich" ja verschoben, eben absolute poitioniert, erscheinen.

Man kann darüber streiten ob dies logisch ist, Fakt ist, es ist so.

Lassen Sie uns eine Lösung finden.
Eigentlich sollte uns doch hier der bereits erwähnte z-index helfen können.
Versuchen wir es doch einfach:


Ein bisschen Text und ein wenig InformationLeider keine Info vorhanden ! und dann noch ein bisschen mehr Text, damit es sich auch lohnt. Und wie versprochen, noch mehr Text und dann noch viel mehr Text, ja geradezu unglaublichNa soviel Text ist es nun wieder auch nicht. viel Text. Und noch ein bisschen mehr, auch wenn es nicht sonderlich sinnvoller Text ist.

CSS
.tooltip {
position: relative;
border-bottom: 1px dotted #C20; cursor: help;
}
.tooltip em {display: none;}
.tooltip:hover em {
display: block;
position: absolute;
left: 0; top: 0;
margin: 20px 0 0;
width: 200px; color: #D3A7A7;
font-style: normal;
border: 2px solid #00ACE6;
padding: 4px;
background: #4B4B4E;
z-index: 2;}

XHTML
<p>Ein bisschen Text und ein wenig<span class="tooltip"> Information <em>Leider keine Info vorhanden !</em></span> und dann noch ein bisschen mehr Text, damit es sich auch lohnt. Und wie versprochen, ....ja geradezu <span class="tooltip">unglaublich<em>Na soviel Text ist...</em></span> viel Text. Und noch ein bisschen mehr,....</p>

Geht doch ! ... Oder ? ... Leider haben wir die Rechnung ohne den IE7 gemacht.
Der nämlich, lässt den unteren Tooltip-Container, das <span>unglaublich<em>....</em><span/>, weiterhin durchscheinen.
Bevor wir uns über diesen nicht standard-konformen Browser wiederholt aufregen ( ;-) ) , lassen Sie uns versuchen zu verstehen, was IE7 da macht.

Es ist bekannt, dass der IE7 unzulässigerweise bei jedem positionierten Element
(nicht position: auto; oder position: static;)
einen neuen stacking-context aufmacht, was er eigentlich standardgemäss nur dürfte, wenn dem positionierten Element ein z-index anders als auto zugeordnet wäre, was auch bei z-index: 0; schon der Fall wäre.
(z-index: auto; ist nicht dasselbe wie z-index: 0;, was, wie bereits gesagt, in einer noch zu schreibenden Anhandlung über z-index näher betrachtet werden wird.)

Wenn also der IE7 bei den Tooltip-Containern (und zwar dann ja bei beiden) einen neuen stacking-context aufmacht, wie können wir ihm das abgewöhnen und, da wir das nicht können,
wie können wir ihn überlisten ohne standard-konforme Browser zu "verwirren" und
- das wäre natürlich optimal -
ohne die berühmten conditional comments ?

Einen neuen stacking-context aufzumachen heisst effektiv, einen z-index: 0; zu vergeben.
Wir würden also gerne dem oben liegenden <span>Information<em>Leider keine...</em></span> einen höheren z-index als 0 vergeben, um das Problem aus der Welt zu schaffen.
Haben wir aber dies nicht bereits getan indem wir dem em einen z-index: 2; vergeben haben ?
Ist es ein Unterschied ob wir dem umgebenden span- oder dem em- Element den besagten z-index vergeben ?
Was der IE7 hier genau "denkt" ist mir nicht klar, vielleicht kann mich jemand erhellen ?
Versuchen wir es also mit der z-index-Vergabe für das gesammte span-Element.
Wie aber sollen wir das machen, ohne auch dem unteren span gleich den gleichen z-index zu verpassen ? Wir möchten ja flexibel bleiben und können und wollen nicht dem oberen span eine eigene Klasse vergeben.
Vergeben wir aber gleichzeitig dem unteren span den gleichen z-index, ist ja nichts gewonnen.

Die Lösung ist so einfach wie genial da sie weder conditional comments benötigt, noch die standard-konformen Browser verwirrt.

So geht's:


Ein bisschen Text und ein wenig InformationLeider keine Info vorhanden ! und dann noch ein bisschen mehr Text, damit es sich auch lohnt. Und wie versprochen, noch mehr Text und dann noch viel mehr Text, ja geradezu unglaublichNa soviel Text ist es nun wieder auch nicht. viel Text. Und noch ein bisschen mehr, auch wenn es nicht sonderlich sinnvoller Text ist.

CSS
.tooltip {
position: relative;
border-bottom: 1px dotted #C20; cursor: help;
}
.tooltip:hover {z-index: 1;}
.tooltip em {display: none;}
.tooltip:hover em {
display: block;
position: absolute;
left: 0; top: 0;
margin: 20px 0 0;
width: 200px; color: #D3A7A7;
font-style: normal;
border: 2px solid #00ACE6;
padding: 4px;
background: #4B4B4E;
}

XHTML
<p>Ein bisschen Text und ein wenig<span class="tooltip"> Information <em>Leider keine Info vorhanden !</em></span> und dann noch ein bisschen mehr Text, damit es sich auch lohnt. Und wie versprochen, ....ja geradezu <span class="tooltip">unglaublich<em>Na soviel Text ist...</em></span> viel Text. Und noch ein bisschen mehr,....</p>

Wir vergeben einfach im Moment des :hover einen z-index: 1; und brauchen den z-index: 2; für .tooltip:hover em nicht mehr.
Damit liegt jeder der span-Tooltip-Container (inkl. seines Inhaltes, dem em) im Moment des :hover im stacking-context über dem anderen und überdeckt ihn somit.
Und dies auch im IE7, der zwar bei jedem span mit der class tooltip einen neuen stacking-context aufmacht, was allerdings, wie bereits gesagt, lediglich einem z-index: 0; entspricht. Wir liegen aber ja mit z-index: 1; im Moment des :hover schon höher.

Dass, wenn wir den Tooltip über dem Text (span-Element), anstatt darunter darstellen würden, ein darüberliegendes Tooltip ohnehin nicht überdeckt würde, auch ohne z-index -Angabe nicht, ist ebenfalls ein Thema für den noch folgenden Post über stacking-context und z-index.

Verwirrend ?
Das war es für mich, zumindest am Anfang, schon.
Grämen Sie sich also nicht, falls Sie nicht alles verstanden haben sollten.
Verfolgen Sie einfach nochmals Schritt für Schritt die Entwicklung des Tooltip und, was stacking-context und z-index betrifft, lesen Sie den folgenden Post im Blog über stacking-context, welcher das Thema komplett auseinander nimmt und erklärt.

Abschliessend möchten wir noch betrachten, wo überall der Tooltip konsistent dargestellt werden kann ohne Flexibilität zu verlieren.

Möchten wir den Tooltip über, vor oder hinter dem Text darstellen, tun sich einige Schwierigkeiten auf.
Wie wollen wir die Position festlegen ?


Positionieren des Tooltip

Tooltip über dem Text

Schauen wir uns erst einmal die Möglichkeit an den Tooltip über dem Text welcher den Tooltip beinhalten soll darzustellen.
Was können wir hier als Positionierungshilfe benutzen ?
position: absolute; steht nicht zur Diskussion, das brauchen wir in jedem Fall.
Mit welchen Werten für left, top oder right, bottom belegen wir die Position aber ?

Um flexibel zu bleiben und den Tooltip verschiedenen Textgrößen zuordnen zu können, geben wir die Position in Prozent an.
Das hätten wir auch weiter oben bei den Tooltips unter dem Text bereits tun können. Wir brauchen dann auch keine margin zu setzen um den Tooltip nicht am Text kleben zu lassen sondern können den Abstand des Tooltips zum Text gleich in die Prozentangabe einfliessen lassen, was, da es eine relative Grösse ist (gemessen am inline-element des Textes), auch den Abstand des Tooltip zum Text relativ gleich bleiben lässt. Was wollen wir mehr ?

Ein bisschen Text und ein wenig InformationLeider keine Info vorhanden ! und dann noch ein bisschen mehr Text, damit es sich auch lohnt. Und wie versprochen, noch mehr Text und dann noch viel mehr Text, ja geradezu unglaublichNa soviel Text ist es nun wieder auch nicht. viel Text. Und noch ein bisschen mehr, auch wenn es nicht sonderlich sinnvoller Text ist.

CSS
.tooltip {
position: relative;
border-bottom: 1px dotted #C20; cursor: help;
}
.tooltip em {display: none;}
.tooltip:hover em {
display: block;
position: absolute;
left: 0; bottom: 120%;
width: 200px; color: #D3A7A7;
font-style: normal;
border: 2px solid #00ACE6;
padding: 4px;
background: #4B4B4E;
}

XHTML
<p>Ein bisschen Text und ein wenig<span class="tooltip"> Information <em>Leider keine Info vorhanden !</em></span> und dann noch ein bisschen mehr Text, damit es sich auch lohnt. Und wie versprochen, ....ja geradezu <span class="tooltip">unglaublich<em> Na soviel Text ist...</em></span> viel Text. Und noch ein bisschen mehr,....</p>

Wir brauchen hier, wem ist es aufgefallen ?, nun nicht mehr den z-index für .tooltip:hover auf 1 zu setzen.
Auch so scheint der obere Tooltip-Container nicht durch den unteren Tooltip durch, auch nicht im IE7 !
Wer weiß warum ?

Nun können wir den Tooltip auch verschieben, z.B. an die rechte oder linke Ecke.
Dabei sollte man jedoch aufpassen, dass, je nach Webseiten-Design, der Tooltip bei einem Wort, welches am Rande des im Browser sichtbaren Containers steht eventuell ausserhalb des view-ports, des sichtbaren Bereiches, liegt.
- User haben verschieden grosse Bildschirme -

Kurz die zwei genannten Beispiele:

left: 100%; bottom: 120%;

Ein bisschen Text und ein wenig InformationLeider keine Info vorhanden ! und dann noch ein bisschen mehr Text, damit es sich auch lohnt. Und wie versprochen, noch mehr Text und dann noch viel mehr Text, ja geradezu unglaublichNa soviel Text ist es nun wieder auch nicht. viel Text. Und noch ein bisschen mehr, auch wenn es nicht sonderlich sinnvoller Text ist.


right: 100%; bottom: 120%;

Ein bisschen Text und ein wenig InformationLeider keine Info vorhanden ! und dann noch ein bisschen mehr Text, damit es sich auch lohnt. Und wie versprochen, noch mehr Text und dann noch viel mehr Text, ja geradezu unglaublichNa soviel Text ist es nun wieder auch nicht. viel Text. Und noch ein bisschen mehr, auch wenn es nicht sonderlich sinnvoller Text ist.


Tooltip neben dem Text

Aus den obigen letzten beiden Beispielen ergibt sich auch schon eine Position, links oder rechts des Textes welcher den Tooltip birgt.
Hier kann man dann wählen, ob sich der Text nach oben oder nach unten erstrecken soll.
Die Prozentangaben kommen uns hier sehr gelegen, da sie sich ja auf den Eltern-Container beziehen und bei einer Angabe von top oder bottom dessen Höhe und bei einer Angabe von left oder right dessen Breite als Bezug haben.
Es ist folglich egal wie lang der Text ist welcher den Tooltip beherbergt.

left: 110%; bottom: 0;, hier mit .tooltip:hover {z-index: 1;}, es könnte ja ein Tooltip unmittelbar folgen und würde durch den ersten durchscheinen.

Ein bisschen Text und ein wenig InformationLeider keine Info vorhanden ! und dannLeider keine Info vorhanden ! noch ein bisschen mehr Text, damit es sich auch lohnt. Und wie versprochen, noch mehr Text und dann noch viel mehr Text, ja geradezu unglaublichNa soviel Text ist es nun wieder auch nicht. viel Text. Und noch ein bisschen mehr, auch wenn es nicht sonderlich sinnvoller Text ist.

CSS
.tooltip {
position: relative;
border-bottom: 1px dotted #C20; cursor: help;
}
(.tooltip:hover {z-index: 1;})
.tooltip em {display: none;}
.tooltip:hover em {
display: block;
position: absolute;
width: 200px; color: #D3A7A7;
font-style: normal;
border: 2px solid #00ACE6;
padding: 4px;
background: #4B4B4E;
}

XHTML
<p>Ein bisschen Text und ein wenig<span class="tooltip"> Information <em>Leider keine Info vorhanden !</em></span> und dann noch ein bisschen mehr Text, damit es sich auch lohnt. Und wie versprochen, ....ja geradezu <span class="tooltip">unglaublich<em> Na soviel Text ist...</em></span> viel Text. Und noch ein bisschen mehr,....</p>

right: 110%; bottom: 0;

Ein bisschen Text und ein wenig InformationLeider keine Info vorhanden ! und dann noch ein bisschen mehr Text, damit es sich auch lohnt. Und wie versprochen, noch mehr Text und dann noch viel mehr Text, ja geradezu unglaublichNa soviel Text ist es nun wieder auch nicht. viel Text. Und noch ein bisschen mehr, auch wenn es nicht sonderlich sinnvoller Text ist.

oder

left: 110%; top: 0;, hier natürlich wieder mit .tooltip:hover {z-index: 1;}, es könnte ja ein weiteres Tooltip darunter oder rechts daneben liegen, Sie erinnern sich ?

Ein bisschen Text und ein wenig InformationLeider keine Info vorhanden ! und dann noch ein bisschen mehr Text, damit es sich auch lohnt. Und wie versprochen, noch mehr Text und dann noch viel mehr Text, ja geradezu unglaublichNa soviel Text ist es nun wieder auch nicht. viel Text. Und noch ein bisschen mehr, auch wenn es nicht sonderlich sinnvoller Text ist.

oder

right: 110%; top: 0;, und hier auch mit .tooltip:hover {z-index: 1;}, es könnte ja ein tooltip darunter liegen.

Ein bisschen Text und ein wenig InformationLeider keine Info vorhanden ! und dann noch ein bisschen mehr Text, damit es sich auch lohnt. Und wie versprochen, noch mehr Text und dann noch viel mehr Text, ja geradezu unglaublichNa soviel Text ist es nun wieder auch nicht. viel Text. Und noch ein bisschen mehr, auch wenn es nicht sonderlich sinnvoller Text ist.

oder, oder, oder ...

 

!!! Was die Angabe .tooltip:hover {z-index: 1;} betrifft, muss man darauf achten, dass ein auf hover sich öffnender Tooltip nicht einen einen Tooltip bergenden Text überdeckt der dem ersten im Fluss folgt. Das heißt, nicht darunter (y-Achse) und nicht dahinter (x-Achse) (stacking-context-Regeln).
Dazu können Sie bald mehr lesen.


Noch ein wenig IE7 Probleme...

Es gibt noch ein kleines Problem mit dem IE7.
Wenn eine Zeile mit einem <br /> endet um einen Zeilenbruch zu erzwingen und unmittelbar darauf ein <span> mit einem Tooltip in der neuen Zeile folgt, zeigt IE7 den Tooltip in der vorhergehenden Zeile, ganz so also als würde es den Zeilenumbruch nicht geben und sich das Tooltip bergende Element eben noch in der Zeile darüber befinden.
Das ist ein unbegreiflich seltsamer Bug, schliesslich versteht IE7 doch sowohl ein <br /> als auch die position: absolute. Lösung ?
Geben Sie der class .tooltip nicht nur position: relative; sondern auch display: inline-block;.
Es dürfte sich um ein hasLayout-Problem handeln (siehe über hasLayout). Es funktioniert und
es schadet nicht in den standardkonformen Browsern.
(Achtung Ausnahme: Wenn Sie die class .tooltip auf block-level-elements, also z.B. auf <li> anwenden, gibt es mit der display: inline-block;-Deklaration Probleme. Auch wenn man, wie wir hier, dem Text welcher den Tooltip beinhaltet eine border-bottom gibt, ist nicht alles perfekt, da die border Teil des inline-block ist und somit die Zeilenhöhe erhöht und sich der Text beim hovern in der Höhe bewegt, wenn man die border im Hover-Status entfernt. Die Lösung ist entweder die border nicht zu vergeben, wenn gegeben, nicht beim hovern zu entfernen oder für alle anderen Browser in einer weiteren Deklaration display: inline; zu vergeben für .tooltip (nicht in ein und der selben Deklaration !) Damit haben wir für alle standardkonformen Browser das display: inline-block; aufgehoben, für den IE7 bleibt jedoch hasLayout bestehen. Die leichte Zeilenverschiebung ist dann allerdings im IE7 zu sehen, wenn wir .tooltip:hover {border: none;} setzen.)

Also, was IE7 betrifft, denken Sie an das gerade gesagte und an den vorher beschriebenen z-index: 1; für .tooltip:hover.
So sollten Sie Browser-übergreifend gewappnet sein und können sich über fast voll Design-flexible reine CSS-Tooltips freuen.


Fluid oder liquid tooltips (Experimental)

Es könnte der Wunsch bestehen die Tooltips in ihrer Breite flexibel zu machen (in der Höhe sind sie es ja schon).
Das hat leider seine Grenzen mit reinem CSS; aber wir werden einen Kompromiss finden.
Die Tooltips für weniger Text schmaler und für mehr Text etwas breiter zu machen, scheitert zunächst an mehreren Hürden:

Wir können entweder eine max-width vergeben, was leider die Breite des Tooltips weitestgehend auf die Breite des Textes welcher das Tooltip beherbergt begrenzt (woher soll der Tooltip wissen, wann er die max-width ausnutzen soll) oder eine max-with und ein white-space: nowrap;, was aber zur Folge hätte, dass wir den Text des Tooltip in seiner Breite genau einschätzen müssen und manuelle <br /> einsetzen müssen um den Text früh genug umzubrechen.
Man kann damit zufrieden sein, wir möchten jedoch noch eine Möglichkeit vorstellen, die eine gewisse Flexibilität zulässt, ohne dass wir aufpassen müssen, dass unser Text nicht über die Tooltip-Box herausragt (wegen nowrap).
Wir vergeben min-width: 250%;.
Damit haben wir ein gewisses optisches Verhältnis zur Länge des den Tooltip beherbergenden Textes und gleichzeitig verhindern wir eine zu grosse Breite des Tooltips (oder ?). Die Maße können natürlich nach Geschmack angepasst werden.
Schauen wir es uns an:

Ein bisschen Text und ein wenig Information Bald können Sie auch die Abhandlung über stacking-context lesen ! und dann noch ein bisschen mehr ein bisschen mehr ?, naja, das ist schon etwas mehr mehr... Text, damit es sich auch lohnt. Und wie versprochen, noch mehr Text und dann noch viel Sehen Sie die verschiedenen Breiten des Tooltip ? mehr Text, ja geradezu unglaublich Unglaublich viel Text habe ich in der vorliegenden Abhandlung geschrieben, hmm... viel Text. Und noch ein bisschen mehr, auch wenn es nicht sonderlich sinnvoller Text ist.
Und nun ein langes Wort:
Donaudampfschiffahrtskapitänskajütentürschlüsselbund Okay, hier sehen wir die Grenzen meiner Idee. Das geht entschieden zu weit :-)

CSS
.tooltip {
position: relative;
border-bottom: 1px dotted #CC2200; cursor: help; display: inline-block;
}
.tooltip {
display: inline;}
.tooltip em {
display: none;
font-size: 14px;
line-height: 16px;
font-style: normal;
text-align: center;}
.tooltip:hover {
color: #C00; z-index: 1;
}
.tooltip:hover em {
display: block;
position: absolute; left: 0; top: 105%; min-width: 250%; color: #D3A7A7;
border: 2px solid #00ACE6;
padding: 4px;
background: #4B4B4E;}

XHTML
<p>Ein bisschen Text und ein wenig<span class="tooltip"> Information <em> Bald können Sie auch... !</em></span> und dann noch ein bisschen usw.

Ich meine dieser Kompromiss ist annehmbar, wenn man auf dieses optische Verhältnis und etwas Breiten-flexiblere Tooltips Wert legt. So extrem lange Worte werden wohl kaum vorkommen. Ausserdem kann man ja auch zwei Varianten Tooltips verwenden z.B. .tooltip und .tooltip-narrow.
Wie bereits gesagt, kann man die Breitenangabe auch noch veringern. Es wird jedenfalls ein optischer Bezug zur Breite des span-Elements hergestellt und das kann bei Verwendung vieler Tooltips mit Zusatzinformationen und viel informativem Text durchaus begrüssenswert sein.
Wie immer bei solchen Dingen, ist es Geschmacksache. Ich selbst würde die normale Variante mit fester Breite des Tooltips vorziehen.
Zeigen wir kurz noch ein paar Alternativen:

Mit min-width: 200%; max-width: 500%; Hier müssen wir auf die Breite des breitesten Wortes im Tooltip achten.

Ein bisschen Text und ein wenig Information Bald können Sie auch die Abhandlung über stacking-context lesen ! und dann noch ein bisschen mehr ein bisschen mehr ?, naja, das ist schon etwas mehr mehr... Text, damit es sich auch lohnt. Und wie versprochen, noch mehr Text und dann noch viel Sehen Sie die verschiedenen Breiten des Tooltip ? mehr Text, ja geradezu unglaublich Unglaublich viel Text habe ich in der vorliegenden Abhandlung geschrieben, hmm... viel Text. Und noch ein bisschen mehr, auch wenn es nicht sonderlich sinnvoller Text ist.

Nur mit max-width: 500%; Hier müssen wir ebenfalls auf die Breite des breitesten Wortes im Tooltip achten.

Ein bisschen Text und ein wenig Information Bald können Sie auch die Abhandlung über stacking-context lesen ! und dann noch ein bisschen mehr ein bisschen mehr ?, naja, das ist schon etwas mehr mehr... Text, damit es sich auch lohnt. Und wie versprochen, noch mehr Text und dann noch viel Sehen Sie die verschiedenen Breiten des Tooltip ? mehr Text, ja geradezu unglaublich Unglaublich viel Text habe ich in der vorliegenden Abhandlung geschrieben, hmm... viel Text. Und noch ein bisschen mehr, auch wenn es nicht sonderlich sinnvoller Text ist.

Mit max-width: 220px; white-space: nowrap; Die unflexibelste Alternative...

Ein bisschen Text und ein wenig Information Bald können Sie auch die
Abhandlung über
stacking-context
lesen !
und dann noch ein bisschen mehr ein bisschen mehr ?,
naja, das ist schon etwas
mehr mehr...
Text, damit es sich auch lohnt. Und wie versprochen, noch mehr Text und dann noch viel Sehen Sie das Problem ?
Wir müssen ständig
aufpassen, dass wir
die manuellen Breaks
früh genug setzen.
(siehe Quelltext)
mehr Text, ja geradezu unglaublich Unglaublich viel Text
habe ich in der vorliegenden
Abhandlung geschrieben,
hmm...
viel Text. Und noch ein bisschen mehr, auch wenn es nicht sonderlich sinnvoller Text ist.

Eigentlich alles nicht befriedigend, oder ?
Bitte betrachten Sie die letzten Beispiele als experimental.

Spielen Sie etwas herum, vielleicht zum Testen JsFiddle benutzen ?


Styling advanced

Zu guter letzt erwähnen wir noch Möglichkeiten den Tooltip weiter zu stylen,
z.B. duch weiter verschachtelte Container mit Hintergrundbildern oder mit CSS3, rounded corners, also border-radius oder mit Schatteneffekten, box-shadow.
Darüber recherchieren Sie bitte selbst im Internet, hier wollen wir nur kurz noch eine verspielte Tooltip-Version darstellen:

Ein bisschen Text und ein wenig Information Jetzt können Sie auch die Abhandlung über stacking-context lesen ! und dann noch ein bisschen mehr Text, damit es sich auch lohnt. Und wie versprochen, noch mehr Text und dann noch viel mehr Text, ja geradezu unglaublich Unglaublich viel Text habe ich in der vorliegenden Abhandlung geschrieben, hmm... viel Text. Und noch ein bisschen mehr, auch wenn es nicht sonderlich sinnvoller Text ist.

CSS
.tooltip {
position: relative;
border-bottom: 1px dotted #C20; cursor: help;
}
.tooltip em {
display: none; color: #00ACE6;
font-size: 18px;
line-height: 20px;
font-style: normal;
font-weight: bold;
text-align: left;
outline: 4px solid #00BFFF;
background: transparent;
}
.tooltip em b {
display: block;
text-align: center;
font-size: 14px;
line-height: 16px;
font-weight: normal; padding: 5px;
border-width: 6px 6px 6px 6px;
border-style: solid;
border-color: #006080 #0099CC #00ACE6 #007399;
background: #4B4B4E;
}
.tooltip:hover {
color: #CC2200; z-index: 1;
}
.tooltip:hover em {
display: block;
position: absolute;
left: -3%; top: 0;
width: 200px;}

XHTML
<p>Ein bisschen Text und ein wenig<span class="tooltip"> Information <em>&nbsp;<b>Jetzt können Sie auch... !</b></em></span> und dann noch ein bisschen mehr Text, damit es sich auch lohnt. Und wie versprochen, ....ja geradezu <span class="tooltip">unglaublich <em>&nbsp;<b>Unglaublich viel Text habe...</em></span> viel Text. Und noch ein bisschen mehr,....</p>

Erforschen Sie die CSS-Deklarationen selbst.
Die Eigenschaft outline die wir hier benutzt haben, wird im IE7 nicht dargestellt.
Der kleine Vorteil, dass man nun die Maus nicht ruhig halten muß sondern sie auf den Tooltip bewegen kann, um in Ruhe zu lesen, ist nicht zu verachten.
Aber auch das möchte der IE7 nicht mitmachen.
Das hier gezeigte Beispiel lässt sich natürlich auch mit border anstelle von outline bewerkstelligen. Man muß dann halt die Maße ein wenig verändern, sodass der Tooltip-Container (also hier das Wort das rot wird) vernünftig im Rahmen zu sehen ist.
Das für den oberen Teil des em benutzte HTML Leerzeichen &nbsp; dient hier nur der einfachen Realisierung.
Generell dient die gezeigte Vorgehensweise mit verschachtelten Elementen dazu beispielsweise dem em-Container ein Hintergrundbild zu geben, womit dann auch IE7 das Tooltip nicht mehr schliesst wenn man mit der Maus den Text verlässt (immer auf dem offenen Tooltip bleibend versteht sich).
Damit das Hintergrundbild den eigentlichen Urhebertext nicht verdeckt, müsste der Tooltip dann natürlich anders positioniert werden aber auch ein transparentes Hintergrundbild ist denkbar um z.B. das hier vorgestellte Beispiel zu verwirklichen.
Man kann dem em-Container ein Hintergrundbild geben und dem b-Container ebenfalls, womit man dann alle möglichen Formen realisieren kann, z.B. die Form einer Sprechblase.
Auch ein Verschachteln von weiteren Containern ist möglich, um gewünschte Effekte zu realisieren.
Ausserdem haben Sie sicher bemerkt, dass eines unserer Beispiele einen Hyperlink birgt. Links und auch Bilder können in den hier beschriebenen tooltips dargestellt werden, was eine sehr grosse Einsatzbreite ermöglicht.


Getestete Browser:

alle genannten Browser auf Windows OS


Fazit:

Ich hoffe, dass diese nicht ganz kurze Dokumentation für Sie hilfreich und erfrischend war.
Erweiterungen und Ideen sind gerne gesehen und es sind ihnen, wie bereits gesagt, auch kaum Grenzen gesetzt.

 

Viel Freude beim Erstellen eigener Tooltips wünscht,
noRiddle

 

« zurück zum Blog geht zurück zum Blog-Post, interner Link, öffnet sich in diesem Tab oder Fenster