Felix Hohlwegler Web-, Software- und Hardwaresolutions
html

CSS Tooltips



Um mit CSS und HTML ein einfachen Tooltip zu erstellen sind folgende Schritte notwendig



HTML CODE
 Html von Datei TOOLTIP HTML
1:
2:
3:
 
<a href="DEINLINK" class="tooltip" target="_blanc"><span>das ist ein link</span>LINK TEXT</a>


CSS
 Css
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
 
   <style type="text/css">
      a.tooltip span {
         display: none;
         text-align: center;
         padding-top: 20px;
         margin-top: 10px;
         width: 80px;
         height: 50px;
      
}
      a.tooltip:hover span{
         display: inline;
         position: fixed;
         background-image: url('http://holz-soft.de/dokumente/blog/tooltip/tooltip.png');
         background-repeat: no-repeat;
         /*background: #ffffff;*/
         color: #6c6c6c;
         z-index: 2;
      
}
   </style>




Beispielseite: hier klicken