Tooltip und Data-Dashs
Mit den in HTML5 eingeführten Data-Dashs lassen sich individuelle Attribute auf beliebige Elemente anwenden. Diese Attribute können dann über CSS (oder JavaScript) ausgelesen werden. In einem solchen Attribut lassen sich somit auch die Inhalte für die Tooltips ablegen:
<a href="http://www.t3n.de/" data-tooltip="Open. Web. Business.">t3n.de</a>
Mehr muss in HTML für den Tooltip nicht gemacht werden. Alles Weitere erfolgt ausschließlich über CSS3.
CSS3 für Tooltip anpassen
Zunächst einmal müssen alle A-Elemente so angepasst werden, dass sie relativ positioniert werden:
a {
position: relative;
}
Das ist nötig, um in den nächsten Schritten den Tooltip relativ zu dem A-Element positionieren zu können. Im nächsten Schritt wird über das Pseudoelement „:before“ der Inhalt aus dem Data-Dash-Attribut gestaltet und positioniert:
a[data-tooltip]:before {
position: absolute;
left: 0;
top: -40px;
background-color: #ff0000;
color: #ffffff;
height: 30px;
line-height: 30px;
border-radius: 5px;
padding: 0 15px;
content: attr(data-tooltip);
white-space: nowrap;
display: none;
}
Die gemachten CSS-Eigenschaften platzieren den Inhalt aus dem Attribut „data-tooltip“ in weißer Schrift auf roten Hintergrund mit abgerundeten Ecken über den jeweiligen Link. Damit der Tooltip nur sichtbar wird, wenn man mit der Maus über den Link fährt, wird das Pseudoelement zunächst nicht angezeigt („display: none“).
Wichtig ist, dass der Inhalt immer in einer Zeile angezeigt („white-space: nowrap“) und nicht umgebrochen wird, da der Tooltip ansonsten nicht korrekt dargestellt werden kann. Ebenso wichtig ist eine feste Höhenangabe („height: 30px“) für den Tooltip.
Damit der Tooltip auch noch einen Pfeil bekommt, der nach unten auf den Link zeigt, wird als weiteres Pseudoelement „:after“ erstellt, welches den Pfeil beinhaltet:
a[data-tooltip]:after {
position: absolute;
left: 15px;
top: -10px;
border-top: 7px solid #ff0000;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
display: none;
}
Ein Pfeil lässt sich per CSS darstellen, indem man drei breite Rahmen setzt („border-top“, „border-left“ und „border-right“), wobei jedoch nur ein Rahmen eine Farbe bekommt und die anderen beiden Rahmen jeweils transparent sind.
Die Eigenschfat „content“ muss gesetzt werden – auch wenn sie leer bleibt –, da sonsten das Pseudoelement nicht dargestellt wird. Auch dieses Element wird zunächst nicht angezeigt.
Im letzten Schritt muss die Darstellung der beiden Pseudoelemente für einen Hovereffekt angegeben werden:
a[data-tooltip]:hover:after, a[data-tooltip]:hover:before {
display: block;
}
Beim Darüberfahren mit der Maus werden die beiden Pseudoelemente als Blockelemente dargestellt und jeweils oberhalb des Links angezeigt.
Der CSS3-Tooltip funktioniert in allen aktuellen Browsern. Lediglich der Chrome tanzt ein wenig aus der Reihe. Wird der Link, der den Tooltip auslöst, unterstrichen dargestellt, übernimmt auch der Tooltip diese Unterstreichung. Daher sollte man auf die Unterstreichung von Links verzichten, wenn man CSS3-Tooltips einsetzt.
Tooltip für andere Elemente
Der CSS3-Tooltip lässt sich auch auf andere Elemente anwenden. Dazu müssen diesen Elementen lediglich die entsprechenden Attribute („data-tooltip“) zugewiesen werden; und die CSS-Angaben müsen angepasst werden:
a, span {
…
}
a[data-tooltip]:before, span[data-tooltip]:before {
…
}
/* usw. */
Welche Einsatzmöglichkeiten für CSS3 seht ihr noch? Setzt ihr sie bereits ein oder nutzt ihr lieber JavaScript, um solche Effekte einzusetzen?
Weitereführende Links zum Thema CSS3:
- CSS3: Minigalerie mit Zoomfunktion ganz ohne JavaScript
- CSS3: Mit HSL-Farben und Alphakanälen arbeiten
- CSS3: Abwechselnd gestaltete Spalten und Zeilen mit „nth-child“ und „nth-of-type“
- CSS3 und Appearance: Wenn einfacher Text zu einem Link oder Button wird
- CSS3: So werden Texte einfach mehrspaltig
20 Antworten
von peter 09.01.2012 (11:35Uhr) 1.
dazu habe ich niemals JS verwendet, nur hat das markup etwas anders ausgesehen - \lorem ipsur\tooltip\\ mit
.tooltop > span { display: none } und .tooltip:hover > span { display: block; position absolute, ... }
von WalleniuM 09.01.2012 (11:41Uhr) 2.
geht auch HTML im Tooltip? In einem schnellen test habe ich das nicht hinbekommen.
PS: Bitte unbedingt eine Demoseite bei solchen Artikeln. Das erleichtert das ausprobieren etwas.
von Denis Potschien 09.01.2012 (12:05Uhr) 3.
@WalleniuM: Hier eine Demo bei JSFIDDLE.
von Sebastian 09.01.2012 (12:19Uhr) 4.
Endlich erklärt mir mal einer, wie das mit den Pfeilen geht. Kenne die beispielsweise aus Twitters Bootstrap, aber wenn man den Trick nicht kennt, ist es verdammt schwer ihm auf die Spur zu kommen.
Danke, danke!
von Patrick 09.01.2012 (12:42Uhr) 5.
Klasse, dass man durch das neue Data-Attribut auch endlich einen sinnvollen Ort hat, wo man die Inhalte für solche, anfangs versteckten, Dinge ablegt.
Leider fehlt mir die Möglichkeit HTML in den Tooltip zu bekommen. Mehrzeilig sollte der Tooltip auch mal sein. Gibt es dafür auch interessante Ansätze in HTML5?
Für eine Demo bei solchen Tech-Demos wäre ich auch (:
Danke für den aufschlussreichen Artikel!
von Denis Potschien 09.01.2012 (13:30Uhr) 6.
@Patrick: Eine Demo habe ich in den Kommentaren verlinkt (siehe Kommentar 3). Eine Möglichkeit, HTML-Elemente mit in den Tooltips unterzubringen, wird es mit reinem CSS wohl nicht geben. Da müsste man dann doch JavaScript bemühen.
von peter 09.01.2012 (14:31Uhr) 7.
das geht auch ohne javascript... http://webbe.de/index.shtml?CONTENT=script_css_tooltip;LANG=de
is sogar ziemlich einfach ;)
von Robert 09.01.2012 (14:54Uhr) 8.
Cool! Werde ich gleich mal in meinem Blog testen!
Lässt sich das Problem im Chrome nicht durch ein "text-decoration:none;" im hover-Style beheben? (habs leider selbst noch nicht testen können...)
von WalleniuM 09.01.2012 (14:57Uhr) 9.
@Denis: Danke, bitte in Zukunft immer im Artikel angeben. Dann sind sie noch besser :)
Eventuell kannst du deinen Eintrag ja erweitern, wenn das von Peter funktioniert. Muss ich mir mal genauer anschauen.
von Wie viel HTML5/CSS3 kann dein Browser? J… 09.01.2012 (15:33Uhr) 10.
[...] CSS3: Individuelle Tooltips ohne JavaScript - t3n News [...]
von Moderne Pfeile mit CSS – Sebastian… 09.01.2012 (16:32Uhr) 11.
[...] ganze dann in etwa so aussehen:Vielen dank an Denis Potschien, der mich mit seinem T3N-Artikel „CSS3: Individuelle Tooltips ohne JavaScript“ auf diese Idee gebracht hat. Dieser Beitrag wurde unter Allgemein, Internet und Webentwicklung [...]
von XRay – Javascript-Bookmarklet scha… 09.01.2012 (16:50Uhr) 12.
[...] CSS3: Individuelle Tooltips ohne JavaScript - t3n News [...]
von XRay – Javascript-Bookmarklet scha… 09.01.2012 (16:50Uhr) 13.
[...] CSS3: Individuelle Tooltips ohne JavaScript - t3n News [...]
von Bootstrap: CSS- und HTML5-basiertes WebA… 10.01.2012 (12:46Uhr) 14.
[...] CSS3: Individuelle Tooltips ohne JavaScript - t3n News Weitere Artikel zu CSS, HTML, HTML5 und Twitter Kommentare: 9 Tweets: 38 Facebook-Likes: 7 23.08.2011 Ads_BA_AD("FOOT"); Das könnte dich auch interessieren:Mobile Boilerplate V2 ist daHTML5 Schnellstart für Web AppsEben gab Paul Irish via Twitter bekannt, dass die Version 2 der Mobile Boilerplate zum Download bereit gestellt wurde.So geht'sDrag & Drop mit HTML5Die Drag-and-Drop-API in HTML5 erlaubt allerlei Desktop-artige Magie: Files aus dem Browser auf dem Desktop ablegen,...BonesIdeale WordPress-Theme-Vorlage auf Basis von HTML5-BoilerplateDie Entwicklung eines WordPress-Themes ist ein hartes Stück Arbeit, das sich jeder Developer in unterschiedlichem...t3n-LinktippsWordPress-Lexikon, Checkin-Müdigkeit, Marken auf Facebook, Cheats Sheets für HTML5/CSS3, RoboCop-BrillenDiesmal bei unseren Fundstücken aus dem Netz: Ein WordPress-Lexikon für Einsteiger, eine Infografik zeigt das... [...]
von CSS3: Individuelle Tooltips ohne JavaScr… 10.01.2012 (16:33Uhr) 15.
[...] CSS3: Individuelle Tooltips ohne JavaScript » t3n News [...]
von Hanseat-Unikat 12.01.2012 (00:10Uhr) 16.
Segel setzen zum neu ausrichten...Anstatt mein aktuelles, fachmännisch erstelltes und von Twitter entliehenes Blogtheme auf einen Schlag abzulösen, auszutauschen und zu verbrennnen (was auch unverständlich wäre, da handwerklich solide), habe ich mich dazu entschieden einen etwas humane...
von CSS: Geometrische Figuren mit reinem CSS… 20.01.2012 (21:38Uhr) 17.
[...] CSS3: Individuelle Tooltips ohne JavaScript [...]
von CSS3-Experiment: Mac-Login-Screen komple… 23.01.2012 (18:16Uhr) 18.
[...] CSS3: Individuelle Tooltips ohne JavaScript bei T3N [...]
von CSS3-Experiment: Mac-Login-Screen komple… 23.01.2012 (19:54Uhr) 19.
[...] Links:Blogpost von Alessio Atzeni: CSS3-Experiment: Mac OS X Lion with CSS3 CSS3: Individuelle Tooltips ohne JavaScript bei T3N Schicke Hover-Effekte mit CSS3 Transitions bei T3N Beindruckende CSS 3D Demo: „Making [...]
von CSS3: Animationen ohne Flash und JavaScr… 30.01.2012 (15:33Uhr) 20.
[...] CSS3: Individuelle Tooltips ohne JavaScript [...]