Anzeige
Anzeige
News
Artikel merken

CSS3: Individuelle Tooltips ohne JavaScript

Mit Tooltips lassen sich für Links und Bilder, aber auch für andere Inhalte zusätzliche Informationen anzeigen. Wer auf individuell gestaltete Tooltips setzt, muss dank CSS3 und HTML5 nicht mehr auf JavaScript setzen. Mit wenig Aufwand lassen sich selbst gestaltete Tooltips realisieren.

Von Denis Potschien
2 Min. Lesezeit
Anzeige
Anzeige

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>
Anzeige
Anzeige

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:

Anzeige
Anzeige
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:

Anzeige
Anzeige
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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

CSS3-Tooltip

CSS3-Tooltip

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.

Anzeige
Anzeige

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?

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
11 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

peter

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, … }

Antworten
WalleniuM

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.

Antworten
Denis Potschien

@WalleniuM: Hier eine Demo bei JSFIDDLE.

Antworten
Sebastian

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!

Antworten
Patrick

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!

Antworten
Denis Potschien

@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.

Antworten
peter

das geht auch ohne javascript… http://webbe.de/index.shtml?CONTENT=script_css_tooltip;LANG=de
is sogar ziemlich einfach ;)

Antworten
Robert

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…)

Antworten
WalleniuM

@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.

Antworten
Dirk

Hallo,
ich habe ein Frage dazu:

Wie bekomme ich in:
data-tooltip=“Open. Web. Business.“

einen Zeilenumbruch in ?

Antworten
John Müller

Hallo Dirk, dazu muss die height rausgenommen werden und das white-space wird mit dem Attribut pre verändert:

a {
position: relative;
}

a[data-tooltip]:before {
position: absolute;
left: 0;
top: -40px;
background-color: #ff0000;
color: #ffffff;
line-height: 30px;
border-radius: 5px;
padding: 0 15px;
content: attr(data-tooltip);
display: none;
white-space: pre;
}

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;
}

a[data-tooltip]:hover:after, a[data-tooltip]:hover:before {
display: block;
}

HTML:

t3n.de

https://jsfiddle.net/ucyk815p/

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige