Für nen Tooltip:

Der Css-Part ist easy, aber wie häng ich den Layer nun an die Maus? Hab mir schon gut 50 Tooltip-Scripte angeschaut und bin verzweifelt.

1. <div class="tooltip">Mein Tooltiptext</div>

Quelltext in Zwischenablage kopieren

Hm, ich empfehle dir nen JS-Framework zu benutzen (sofern du evtl. auch noch andere JS-Dinge auf der Site hast). Schau dir mal http://mootools.net/ () an, die haben Tooltips „eingebaut“ ( http://mootools.net/docs/Plugins/Tips ).

Wenns umfangreicher sein soll, gibts z.B. http://www.e-magine.ro/playground/tipsx3/ , dass auf Mootools aufbaut.

1. <script type="text/javascript" language="Javascript">
2. <!--
3.  
4. var IE = document.all?true:false
5.  
6. if (!IE) document.captureEvents(Event.MOUSEMOVE)
7.  
8. document.onmousemove = getMouseXY;
9.  
10. var tempX = 0
11. var tempY = 0
12.  
13. function getMouseXY(e) {
14. if (IE) {
15. tempX = event.clientX + document.body.scrollLeft
16. tempY = event.clientY + document.body.scrollTop
17. } else {
18. tempX = e.pageX
19. tempY = e.pageY
20. }
21. if (tempX < 0){tempX = 0}
22. if (tempY < 0){tempY = 0}
23.  
24. document.getElementById('div').left = tempX + 'px'
25. document.getElementById('div').top = tempY + 'px'
26. return true
27. }
28. //-->
29. </script>

Quelltext in Zwischenablage kopieren

→ jQuery Tooltip-Plugin