1
0

tooltips.css 912 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. /*
  2. Tooltips sind ja was feines.
  3. Aber bisher habe ich immer nur Lösungen gefunden, die auf JavaScript aufsetzten. Ist ja nicht weiters schlimm, da eigentlich jeder JavaScript aktiviert haben sollte. Denn es gibt nur noch sehr wenig, dass nicht mehr ohne Javascript funktioniert.
  4. Das sollte uns aber trotzdem nicht davon abhalten, auch mal was ohne JavaScript zu machen.
  5. Man erstellen einen Link dann wie folgt:
  6. <a href="javscript:void(0);">asd Tooltip</a>
  7. Das javscript verhindert das event sollte man auf den Link draufklicken.
  8. Danach nur noch folgende CSS Definitionen und schon hat man seinen Tooltip.
  9. */
  10. a {
  11. z-index:10;
  12. }
  13. a:hover{
  14. position:relative;
  15. z-index:100;
  16. }
  17. a span{
  18. display:none;
  19. }
  20. a:hover span{
  21. display:block;
  22. position:absolute;
  23. float:left;
  24. white-space:nowrap;
  25. top:-2.2em;
  26. left:.5em;
  27. background:#fffcd1;
  28. border:1px solid #444;
  29. color:#444;
  30. padding:1px 5px;
  31. z-index:10;
  32. }