Archivlink: javarea.de Forum > JavaScript > JScript browserunabhängiger Tooltip
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > JScript browserunabhängiger Tooltip

Pages: [1]
geschrieben von Ghoose1 am 14.03.2005 - 00:09
Hallo,

ich habe jetzt stundenlang im Internet gesucht, aber nichts gescheites gefunden. Selbst hier habe ich im JScript Archiv eigentlich kein wirklich funktionierendes Script (im Mozilla) gefunden Im Forum habe ich auch keine wirklich hilfreichen Threads gefunden, also versuch ichs mal so:

Ich suche einen Script, welcher einen Tooltip ueber ein beliebiges Element anzeigt. Dieser Tooltip sollte HTML-Unterstuetzen und relativ zum Element angezeigt werden (ueber allen anderen HTML-Elementen). Somit ist auch kein festes DIV-Element zu gebrauchen.
Aber das wichtigste ist, dass es eigentlich in nahezu jeden Browser (also wenigstens IE, Netscape bzw. Mozilla) funktionieren soll.
Wie oben schon erwaehnt, viele Tooltip-JScripts von dem Archiv haben bei mir, selbst mit dem IE nicht funktioniert.

Besitzt jemand solch einen JScript bzw. hat jemand einen guten Link?

Vielen Dank.

Gruss Ghoose1

geschrieben von Daniel am 14.03.2005 - 00:16
Hallo,

ich denke das ist so in etwa wie du es brauchst. Zur Not lässt es sich auch einfach anpassen ;)

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Tooltip</title>
    <style type="text/css">
        #tooltip {position: absolute;}
    </style>
    <script language="JavaScript" type="text/javascript">
        function tooltip(text)
        {
            var tooltip = document.getElementById('tooltip');
            if (!text)
                tooltip.style.display = 'none';
            else
            {
                tooltip.style.display = 'inline';
                tooltip.style.left = mouse.left + 8;
                tooltip.style.top  = mouse.top + 8;
                tooltip.innerHTML  = text;
            }
        }
        /* Aktuelle Mausposition */
        var mouse;
        function Mouse_Position(evt)
        {
            if(!evt)
                evt = window.event;
            mouse = {
                left: evt.pageX ? evt.pageX : evt.clientX,
                top: evt.pageY ? evt.pageY : evt.clientY
            };
        }
        document.onmousemove=Mouse_Position;
    </script>
</head>
<body>
<a href="#" onMouseMove="tooltip('Das ist ein Test');" onMouseOut="tooltip()">Das ist ein Test</a>
<div id="tooltip" />
</body>
</html>


Daniel

geschrieben von Ghoose am 14.03.2005 - 05:53
Super, vielen Dank für die schnelle Antwort!

Das Jscript hilft mir schonmal sehr weiter!

Kann man dieses Element auch relativ zum Element und nicht relativ zum Cursor positionieren?
Hatte da schon etwas probiert, das "mouse.top" auf die id des aufrufenden elements zu legen, leider wird der tootip dann nur immer in die untere rechte ecke des parent-Elements verlegt - auch ein Div um die Links funktioniert nicht wirklich.

Gibt es eine Moeglichkeit, nur ein Div-Element zur Anzeige des Tooltips zur Verwenden? Also dass ich (ich hab die Tables ganz nach unten geschrieben) anstatt der Tables, Divs benutze (sollte eigentlich kein Problem sein), aber fuer die ganze Seite nur ein solches Div und der Text der in diesem Div stehen soll, per Parameter dem Funktionsaufruf uebergeben wird?
Dies habe ich auch schon probiert, jedoch weis ich nicht genau, wie ich den per Parameter uebergebenen Info-Text in das Div-Element schreiben soll. "document.write()" funktioniert ja glaub ich nicht, wie hier gewollt.

Vielen Dank.

Gruss Ghoose1

geschrieben von Daniel am 14.03.2005 - 08:24
Habe den Code oben nochmal geändert. Aber was genau meinste du mit 'relativ zum Objekt'? Das das ganze wie eine Art Untermenü aufgeht?

geschrieben von Ghoose1 am 14.03.2005 - 13:06
ui, ich dachte, dass innerHTML nur mit IE geht - wieder was dazugelernt

ja, du kannst es als eine Art Untermenue vergleichen, also dass sich die Position des Tooltips nicht mit der Maus bewegt. Also beim m/over wird der Tooltip immer 20px nach rechts und 15 px nach unten verschoben, egal wo der cursor ist und dies abhaengig vom Anfang des a-Tags oder anderer Tags ?

Ich denke das geht nicht so gut bzw. einfach oder ? Habe dies ebenfalls schon ein bisschen ausprobiert aber es zeigt entweder nichts an, oder ganz unten am Ende des Elementbaums.


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.