DE PL
Homepage->Script->CSS->CSS-Tooltip
3 User online am 01.11.2014, 13:08:41


Wer einen Fehler gemacht hat und ihn nicht korrigiert, begeht einen zweiten. Konfuzius

Newsletter




Anzeigen

Umfrage

Die Zukunfts- sprache des Internets

 Login

CSS-Tooltip

Auch mit reinem CSS ist es möglich eine Infobox oder Tooltip zu erstellen. Mit ein wenig Probieren bekommt man die tollsten Effekte!
Die Beispiele können und sollen nach eigenen Bedürfnissen angepasst werden, z.B. den Rahmen oder die Hintergrundfarbe ändern.

Es gibt sicherlich viele verschiedene Möglichkeiten einen Tooltip anzuzeigen. Zwei potentielle möchte ich kurz vorstellen: den relativen und absoluten Tooltip.

relativ - heiß hier, dass die Anzeige des Tooltips abhängig von der Position des Textes ist, d.h. Tooltip erscheint unter dem Text und zwar unabhängig davon an welcher Stelle sich der Text befindet: der Tooltip geht mit!
Hier gibt es einen Tooltip Dieser Tooltip ist relativ zu dem zugehörigen Text zum Ausprobieren. Oder auch ein zweites Beispiel Das 2. BeispielEs sind auch Zeilenumbrüche erlaubt!


Hier geht es weiter!
.

absolut - heiß hier, dass die Anzeige des Tooltips abhängig von der Position der Elternelements ist, z.B. bei einem Menü erscheint der Tooltip immer an der gleicher Stelle zum Elternelement.

Der Code dazu sieht so aus:
/* Relativer Tooltip */
a.tooltip, a.tooltip:link, a.tooltip:visited, a.tooltip:active  {
  position: relative;
  text-decoration: none; 
  font-style: italic;
  color: #0000ff; 
  }
  
a.tooltip:hover {
  color: #0000ff; 
  background: transparent;
  }

a.tooltip span {
  display: none;  
  text-decoration: none; 
}

a.tooltip:hover span {
  display: block;
  position: absolute; 
  top: 20px; 
  left: 0; 
  width: 200px;
  z-index: 100;
  color: #000000; 
  border:1px solid #000000; 
  background: #FFFFCC;
  font: 12px Verdana, sans-serif; 
  text-align: left;
  }
  
a.tooltip span b {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weigth: bold;
  color: yellow;
  background-color: gray;
  border: 0px;
  border-bottom: 1px solid black;
}

/* Absoluter Tooltip */
div#menu {
  position: relative; 
  top: 10px; 
  left: 0px; 
  width: 170px; 
  height: 180px; 
  font: 18px Verdana, sans-serif; 
  z-index: 100;
  }
  
div#menu a {
  display: block; 
  text-align: center; 
  font: bold 1em sans-serif; 
  padding: 3px 10px; 
  margin: 0 0 1px; 
  text-decoration: none; 
  color: black; 
  background: #99FF99;
  border: 1px solid black;
  }
  
div#menu a:hover {
  color: #441111; 
  background: #FFFF66;
  border: 1px dotted blue;
  }

div#menu a span {display: none;}
div#menu a:hover span {
   display: block;
   position: absolute; 
   top: 94px; 
   left: 0; 
   width: 158px;
   padding: 5px; 
   z-index: 100;
   color: #000000; 
   background: #FFFFCC;
   font: 12px Verdana, sans-serif; 
   text-align: center;
   border: 1px dashed black;
   }


$Datei: /index.shtml?CONTENT=script_css_tooltip
$Letzte Änderung: 01.01.1970 01:00:00