Suche JS Tooltip

A

aargau

Erfahrenes Mitglied
Hallo Zusammen

Ich bin auf der Suche nach einem Tooltip Script. Ich habe momentan zwar bereits eines jedoch brauche ich nun ein etwas besseres.
Momentan habe ich das http://www.walterzorn.de/tooltip/tooltip.htm im einsatz welches Prima läuft. Durch die Hilfe eines Forumusers habe ich dazumals dieses so umgebastelt das es die Infos in der Box via ajax nachladet.
Das Script hat jedoch zwei nachteile welche ich nun unbedingt brauche
1. Wenn ein Tooltip ganz unten auf einer Seite angezeigt wird kann man es nicht betrachten da es zu weit unten ist und durch Scrollen ausgeblendet wird.
2. Man soll mit der Maus auf das Tooltip fahren können ohne das es verschwindet. verlässt man jedoch das Fenster oder den Link soll es Automatisch ausgeblendet werden. Das ganze brauche ich daher, weil man auf dem Tooltip einen Link anklicken kann.

Ich hoffe ihr versteht was ich meine. Ich habe schon das ganze WWW durchsucht und noch keines gefunden welches dies kann.
Es soll natürlich weiterhin via ajax nachgeladen werden können und am besten per onmouseover="blaa(id)" geöffnet werden.
 
naja für einfache Tips welche Infos anzeigen bestimmt eine sehr gute Lösung, da sie auch bei ausgeschaltetem JS läuft, aber ich müsste das ganze ja dann trozdem irgend wie in ein JS verwandelt weil ich den inhalt nachladen möchte, bei einer Seite welche eine Tabelle mit 500 User hat wäre die Ladezeit extrem hoch wenn alle Infos schon im voraus geladen werden würde und sinnlos wäre es auch da sich die meisten eh nur für wenige ander User interessieren.

ich denke man könnte diese Tips die ich jetzt habe irgend wie umbauen, kleiner Timer einbauen welcher Zeit lässt um auf das Tip zu kommen und es dann nicht ausblendet. Dazu habe ich allerdings zu wenig JS wissen und müsste mich wohl zuerst etwas besser in JS einarbeiten.
 
Hi,
aber du könntest damit das Problem mit dem Scrollen umgehen. Und Klassen bzw. IDs kanst du doch auch mit JS bzw AJAX ansprechen.
Also ich kann jetzt zwar nicht wirklich JS aber so als Gedankenanstoss.

Gruß
 
So leute ^^
Ich habe mir da mal was zusammen gebastelt. Grundbasis ist von hier: http://webmatze.de/wirklich-einfache-javascript-tooltips/
Ich habe das ganze allerdings etwas Modifiziert, so das es eben auch überfahrbar ist um Links in der toolbox anzuklicken. Ist nich nicht Perfekt aber dennoch schon mal was ^^ Ev könnte man das ganze auch umschreiben und nicht an der Mausposition sondern an der Linkposition orientieren, wäre ev. etwas schöner da die Position dann immer am selben ort ist.

Hier mal das ganze, vieleicht Hilft es ja jemandem.

HTML: 
<style>
.tooltip {
  position: absolute;
  display: none;
  background-color: black;
  color: white;
}
</style>
<script type="text/javascript">
<!--
wmtt = null;
function updateWMTT(e) {
  if (wmtt != null) {
    x = (document.all) ? window.event.x + wmtt.offsetParent.scrollLeft : e.pageX;
    y = (document.all) ? window.event.y + wmtt.offsetParent.scrollTop  : e.pageY;
    wmtt.style.left = (x + 20) + "px";
    wmtt.style.top   = (y + 20) + "px";
  }
}
function showWMTT(id) {

document.getElementById(1).innerHTML=id ; 
  wmtt = document.getElementById(1);
  wmtt.style.display = "block"
 x = (document.all) ? window.event.x + wmtt.offsetParent.scrollLeft : e.pageX;
    y = (document.all) ? window.event.y + wmtt.offsetParent.scrollTop  : e.pageY;
    wmtt.style.left = (x + 5) + "px";
    wmtt.style.top   = (y + 7) + "px";
}
function a()
{
wmtt.style.display = "none";
}
function hideWMTT() {
w=setTimeout("a()",200) ;

}

function stop()
{
clearTimeout(w) ;
}
// -->
</script>
<!-- Das ist das Tooltip, oben im CSS könnte man z.B. Hintergrundbilder etc. anwenden... -->
<div id="1" class="tooltip" onmouseover="stop()" onmouseout="hideWMTT()"></div>

<A HREF="" onmouseover="showWMTT('Lööööööööööööööle')" onmouseout="hideWMTT()">vvv</a>

Frage an die Profis: Läst sich das onmouseover und onmouseout ev. irgend wie beseitigen und durch class=tooltip ID ersetzen dennoch bei onmouseout die jetztigen Aktionen zu starten?
Würde etwas Quellcode sparen, bei einer Seite wo es hunderte Kommentare hat wäre dies bestimmt eine kleine Ladezeitverschnellerung.
 
Verwende doch einfach jQuery und eines der zahlreichen Tooltip-Plugins.
Klar, somit wird etwas mehr JavaScript geladen, nur funktioniert es mit hoher Wahrscheinlichkeit auch in allen Browsern (und deren verschiedenen Versionen) und du erfindest das Rad nicht zum 1001. mal. ;)

Btw.: jQuery, etc. kannst du auch über Google einbinden - das machen relativ viele Seiten. Somit liegen die Dateien bei vielen Usern sowieso schon im Cache, von daher ist die Verlängerung der Ladezeit nicht wirklich dramatisch.
 
Damit habe ich es auch schon versucht, allerdings habe ich auch da keine Fertige möglichkeit gefunden direkt auf das Tooltip zu kommen bzw. es war zu schwirig für mich umzuschreiben. Ich habe gerade mal minimale JS kentnisse, ohne das tutorial hätte ich es nie hinbekommen. So wie es jetzt ist müsste es in Firefox, IE6-8 und Opera auf jedenfall laufen, die restlichen Browser muss ich noch testen
 
Ich habe mittlerweile eigentlich genau das via JS geschrieben was ich wollte. Hatte mangels JS kentnisse zwar etwas länger bis ich ans Ziel gekommen bin aber es läuft. Nun habe ich aber einfach eine sache die mir nicht wirklich gefällt... Daher wäre ich froh wenn mir h die JS Profis Helfen könnten. Momentan sieht das Aufrufen und ausblenden der JS so aus:
Code: 
onmouseover="s1();s(s2('19'))" onmouseout="h()"

Nun Frage ich mich ob es nicht einen weg gibt das ich einfach in den Links eine klasse ala
Code: 
<A HREF="http://html.omg/user/22" class="tooltip 22">Nickname22</A>
aufrufen kann?
d.H. in JS müsste bei onmouseover über die klasse tooltip bzw. mouseout eine Funktion aufgerufen werden. Ich hoffe ihr versteht was ich meine
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück