Inspiration: CSS3-Tooltips

28.06.2013, 12:35 von Daniel || 4 Kommentare || Mit anderen teilen

Tooltips sind nützliche kleine Helfer, die an entscheidenden Stellen im Text sehr hilfreich sein können. Beim Arbeiten an einem aktuellen Projekt stand plötzlich die Frage im Raum, wie man Tooltips sinnvoll gestalten könnte. Hier nun folgt etwas Inspiration.

Beispiel 1: Der Klassiker

CSS3 Tooltips: Der Klassiker

Demo

<span class="tooltip tooltip1" data-tooltip-text="labore et dolore magna aliquyam erat">accusam et justo</span>

.tooltip {
  display:inline-block;
  position:relative;
  cursor:pointer;
}

.tooltip1 {
  border-bottom:1px dotted #e74c3c;
  color:#e74c3c;
  transition:all 500ms;
}
.tooltip1:hover,
.tooltip1:focus {
  border-bottom-style:solid;
}
.tooltip1:before,
.tooltip1:after {
  display:block;
  opacity:0;
  visibility:hidden;
  position:absolute;
  transition:opacity 500ms;
}
.tooltip1:before {
  content:attr(data-tooltip-text);
  z-index:1000;
  bottom:2em;
  left:2em;
  min-width:15em;
  padding:.3em;
  color:#fff;
  background:linear-gradient(#5c5c5c 0, #3e3e3e 100%);
  border:.1em solid #000;
  border-radius:.2em;
}
.tooltip1:after {
  content:"";
  z-index:999;
  bottom:1em;
  left:3em;
  width:0;
  height:0;
  border-top:1em solid #3e3e3e;
  border-right:1em solid transparent;
}
.tooltip1:hover:before,
.tooltip1:focus:before,
.tooltip1:hover:after,
.tooltip1:focus:after {
  opacity:1;
  visibility:visible;
}

Chrome Firefox Internet Explorer Opera Safari
ja ja ja * ja **
ja ***

* ... erst im IE 10 mit vollständiger CSS3-Unterstützung
** ... Opera unterstützt aktuell keine CSS3-Transitions in Pseudoelementen
*** ... CSS3-Transitions nur mit -webkit-Präfix

Beispiel 2: Die Kurzinfo

CSS3 Tooltips: Die Kurzinfo

Demo

<span class="tooltip tooltip2" data-tooltip-text="gsuffa Schbozal a fescha Bua damischa Griasnoggalsubbm">Woibbadinga auf’d Schellnsau</span>

.tooltip {
  display:inline-block;
  position:relative;
  cursor:pointer;
}

.tooltip2 {
  color:#e74c3c;
  text-decoration:underline;
}
.tooltip2:hover,
.tooltip2:focus {
  text-decoration:none;
}
.tooltip2:before,
.tooltip2:after {
  transition:all 500ms;
}
.tooltip2:before {
  content:"?";
  display:inline-block;
  position:relative;
  z-index:1001;
  margin-right:.5em;
  padding:.2em .5em;
  font-size:.8em;
  border:.1em solid #e74c3c;
  border-radius:50%;
}
.tooltip2:hover:before,
.tooltip2:focus:before {
  color:#fff;
  border-color:#fff;
}
.tooltip2:after {
  content:attr(data-tooltip-text);
  display:block;
  opacity:0;
  visibility:hidden;
  position:absolute;
  z-index:1000;
  bottom:-3em;
  min-width:15em;
  padding:.5em .5em .5em 2em;
  color:#fff;
  text-indent:-1.3em;
  background:#e74c3c;
  border-radius:.3em;
  border-bottom-left-radius:10px;
}
.tooltip2:hover:after,
.tooltip2:focus:after {
  bottom:0;
  opacity:1;
  visibility:visible;
}

Chrome Firefox Internet Explorer Opera Safari
ja ja ja *
ja **
ja ***

* ... erst im IE 10 mit vollständiger CSS3-Unterstützung
** ... Opera unterstützt aktuell keine CSS3-Transitions in Pseudoelementen
*** ... CSS3-Transitions nur mit -webkit-Präfix

Beispiel 3: Die Lightbox

CSS3 Tooltips: Die Lightbox

Demo

<span class="tooltip tooltip3" data-tooltip-headline="Tidah puli inismu" data-tooltip-text="Oh berak aktu kau mas Waku mukau milihkanganyan kemohon">sepan kembali Berhemohon</span>

.tooltip {
  display:inline-block;
  position:relative;
  cursor:pointer;
}

.tooltip3 {
  position:static;
  font-family:monospace;
  color:#e74c3c;
}
.tooltip3:before,
.tooltip3:after {
  display:block;
  opacity:0;
  visibility:hidden;
  position:fixed;
  z-index:1000;
  top:30%;
  left:50%;
  width:50em;
  padding:1em;
  font-family:sans-serif;
  color:#fff;
  cursor:default;
  transform:scale(0);
  transition:transform 400ms, opacity 500ms;
}
.tooltip3:before {
  content:attr(data-tooltip-headline);
  height:1em;
  margin:-.5em 0 0 -25em;
  background:#c0392b;
}
.tooltip3:after {
  content:attr(data-tooltip-text);
  height:10em;
  margin:2.5em 0 0 -25em;
  background:#e74c3c;
}
.tooltip3:hover:before,
.tooltip3:focus:before,
.tooltip3:hover:after,
.tooltip3:focus:after {
  opacity:1;
  visibility:visible;
  transform:scale(1);
}

Chrome Firefox Internet Explorer Opera Safari
ja *
ja ja **
ja ***
ja ****

* ... ohne Animation
** ... erst im IE 10 mit vollständiger CSS3-Unterstützung
*** ... Opera unterstützt aktuell keine CSS3-Transitions in Pseudoelementen
**** ... CSS3-Transitions nur mit -webkit-Präfix

Schlüsselwörter zu diesem Beitrag

« zurück

Hier schreibe ich,

Ich

Daniel Erlinger, als selbstständiger Webdesigner über die Themen Webdesign, Contao, Shopsysteme, Kreatives, Neues und alles, was sonst noch dazu passt.

Vernetzt

Twitter
Mister Wong
Contao Community

Kommentare

08.06.2014 von Mike

Hallo,

Ich habe den ersten Tooltip bei mir eingebunden. Funktioniert mit chrom Tiptop, danke!

Wenn ich jedoch längere Texte in die Box schreibe, wird der Text angeschnitten. Wie kann ich die Limitierung der Grösse der Box ausschalten?

Gruss
M

08.06.2014 von Daniel

Hallo Mike,

für den Tooltip gibt es keine Größenbeschränkung. Es ist zwar eine Mindestbreite angegeben, aber keine Höhe. Von daher sollten auch längere Texte kein Problem sein. Vermutlich kommt eine andere CSS-Regel in die Quere?

Daniel

17.12.2014 von Andreas

Hallo,

ich verwende den tooltip3 und möchte aber im Tooltip eine Aufzählung mittels <ul><li> und <br /> realisieren. Wie kann ich das anstellen?

LG, Andi

17.12.2014 von Daniel

Hallo Andi,

das wird in dieser Form nicht funktionieren, da du im Tooltip-Text HTML unterbringen musst. Da wirst du ohne JavaScript nicht auskommen.

Schau dir mal dieses jQuery-Plugin an: https://iamceege.github.io/tooltipster/

Daniel



Nutze Deinen Gravatar.


Bitte rechnen Sie 8 plus 6.