Vor einiger Zeit habe ich hier auf webmatze.de einen einfachen auf JavaScript und CSS basierenden Tooltip vorgestellt, mit dem sich schnell und einfach Tooltips in die eigenen Seiten integrieren ließen. Dieser funktionierte soweit auch ganz gut in vielen Browsern, doch die Zeit ist nicht stillgestanden und seit der Veröffentlichung hat es einige neue Browserversionen und sogar ganz neue Browser gegeben.
Leider führte dies auch dazu, dass das alte Tooltip Script nun leider nicht mehr in allen wichtigen Browsern funktioniert. Aber auch in den Browsern, wo es funktionierte, ist es unter Umständen zu Fehlern gekommen.
Dies will ich nun zum Anlass nehmen und euch ein komplett neues Tooltip Script zur Verfügung stellen.
XBT - Der Cross-Browser Tooltip
Okay, über Namen lässt sich bestimmt streiten, aber irgendwie muss das Kind ja heißen. Das neue Script basiert auf ein paar Zeilen JavaScript und ist nur geringfügig größer als das alte Script. Dafür ist es jedoch viel flexibler zu konfigurieren, kollidiert nicht mit anderen Scripten und lässt sich leicht über CSS beliebig anpassen. Und wer möchte, kann das Script auch ohne Probleme um neue Funktionen erweitern.
Hier könnt ihr den Code sehen:
(function (window, document, undefined) {
var XBTooltip = function (element, userConf, tooltip) {
var config = {
id: userConf.id || undefined,
className: userConf.className || undefined,
x: userConf.x || 20,
y: userConf.y || 20,
text: userConf.text || undefined
};
var over = function (event) {
tooltip.style.display = "block";
},
out = function (event) {
tooltip.style.display = "none";
},
move = function (event) {
event = event ? event : window.event;
if (event.pageX == null && event.clientX != null) {
var doc = document.documentElement, body = document.body;
event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
}
tooltip.style.top = (event.pageY + config.y) + "px";
tooltip.style.left = (event.pageX + config.x) + "px";
}
if (tooltip === undefined && config.id) {
tooltip = document.getElementById(config.id);
if (tooltip) tooltip = tooltip.parentNode.removeChild(tooltip)
}
if (tooltip === undefined && config.text) {
tooltip = document.createElement("div");
if (config.id) tooltip.id = config.id;
tooltip.innerHTML = config.text;
}
if (config.className) tooltip.className = config.className;
tooltip = document.body.appendChild(tooltip);
tooltip.style.position = "absolute";
element.onmouseover = over;
element.onmouseout = out;
element.onmousemove = move;
over();
};
window.XBTooltip = window.XBT = XBTooltip;
})(this, this.document);Das einzig wirklich benötigte CSS für den Tooltip sieht so aus:
.xbtooltip {
display: none;
position: absolute;
background-color: #fff;
}Dieser kann aber für jeden einzelnen Tooltip noch einmal separat überschrieben werden. Doch dazu später mehr.
Tooltip Beispiele
Kommen wir also zu ein paar einfachen Beispielen, wie man das XBT Tooltip Script einsetzen kann.
Einfacher Tooltip
Der einfachste mögliche Tooltip benötigt einen Link und ein DIV Element mit dem anzuzeigenden Inhalt für den Tooltip.
<a href="http://webmatze.de" onMouseOver="XBT(this, {id:'tt1'})">Ein normaler Tooltip...</a>
<div id="tt1" className="xbtooltip">...mit bereits vorhandenem Inhalt.</div>Dem Tooltip Script wird also über eine Konfiguration welche in geschweiften Klammern steht, die id des Elementes übergeben, welches den Inhalt für den Tooltip enthält. Mehr ist hier nicht notwendig.
Das entsprechende CSS dazu kann z.B. so aussehen:
#tt1 {
background-color: #00FFFF;
color: green;
padding: 3px;
width: 120px;
}Und so sieht dann der Link mit dem Tooltip aus:
Inhalt als Konfiguration übergeben
Wer nicht extra für jeden Tooltip ein extra DIV Element erstellen möchte, kann den gewünschten Inhalt für den Tooltip auch gleich als text übergeben. Das kann dann z.B. so aussehen:
<a href="http://webmatze.de"
onMouseOver="XBT(this, {text: '...indem man ihn <strong>als Text</strong> übergibt', className: 'xbtooltip'})">
Man kann den Inhalt des Tooltips auch dynamisch erstellen lassen...
</a>Als Konfiguration wird also nicht mehr eine id übergeben, sondern ein beliebiger Text, der auch HTML Elemente enthalten kann. Über den Parameter className kann man dem Tooltip dann einen beliebigen Style zuordnen.
Und so sieht das Ganze dann aus:
Man kann den Inhalt des Tooltips auch dynamisch erstellen lassen...
Den Abstand des Tooltips anpassen
Wenn man möchte, dass der Tooltip nicht direkt neben dem Mauszeiger, sondern weiter entfernt angezeigt wird, kann man dies über die Konfiguration anpassen. Dazu gibt es die beiden Parameter x und y.
<a href="http://webmatze.de" onmouseover="XBT(this, {id: 'tt4', x: 50, y: 50})">Man kann den Abstand des Tooltips anpassen...</a>
<div id="tt4" class="xbtooltip">
...indem man eine Konfiguration übergibt
</div>Somit wird der Tooltip nun jeweils 50 Pixel nach rechts und unten verschoben angezeigt.
Man kann den Abstand des Tooltips anpassen...
Funktioniert nicht nur bei Links
Natürlich kann man den Tooltip auch an andere HTML Elemente hängen. Es muss nicht immer ein Link sein.
<div style="position: relative; top: 0px; left: 150px; width: 200px; height: 100px; background-color: #e4e4e4;"
onmouseover="XBT(this, {id:'tt2'})">Das
funktioniert auch mit DIVs statt mit Links...
<div id="tt2" className="xbtooltip">...soweit der Browser onmouseover auf DIV Elementen unterstützt!</div>
</div>Dies würde dann so aussehen:
In absolut positionierten Elementen funktioniert es auch
Mit dem alten Tooltip Script gab es immer Probleme mit Tooltips, die sich in anderen absolut prositionierten Elementen befanden. Hier wurden die Tooltips immer an einer falschen Position angezeigt.
Mit dem neuen Script ist dies nun auch kein Problem mehr:
<div style="position: absolute; top: 0px; left: 300px; width: 200px; height: 100px; background-color: #e4e4e4;">
<a href="http://eventicus.de" onmouseover="XBT(this, {id:'tt3'})">Genauso auch mit Tooltips...</a>
<div id="tt3" class="xbtooltip">...die sich in absolut positionierten Elementen befinden.</div>
</div>Und so sieht's dann aus:
Fazit
Ich hoffe ihr könnt mit diesem neuen Script etwas anfangen und wünsche euch viel Spaß damit. Sollten euch doch noch Probleme auffallen, oder sollte es in einem Browser nicht richtig funktionieren, so könnt ihr mir dies wie immer in den Kommentaren mitteilen.
Ich denke auch das neue Script ist immer noch sehr kompakt und einfach zu verwenden. Vielleicht werde ich in Zukunft noch ein paar Funktionen nachrüsten, sofern ihr noch Wünsche habt, die unbedingt enthalten sein sollten.
Hey,
sehr gute Arbeit! Läuft bei mir in allen Browsern. Ich habe jetzt noch 2 Fragen:
1. Den Tooltip nach links bekommen: Ich hab das jetzt so gelöst {id: ‚tt4‘, x: -100, y: 5}
Funktioniert auch, nur ist die Frage ob das okay ist oder ob es da irgendwie Probleme geben kann?
2. Gibt es die Möglichkeit, dass der Tooltip bei überfahren des Divs immer an einer bestimmen Stelle ist? Ich hab da ein Menü und will, dass beim Überfahren eines Menüpunktes ein Text jeweils über dem Menüpunkt steht.
Ist das mit diesem Script zu realisieren oder geht das komplett anders?
Gruß,
Chris
Hey Chris, danke für’s Testen!
Zu deinen Fragen:
1. die Angabe mit -100 sollte keine Probleme machen. Die werden einfach von der aktuellen Mauszeigerposition abgezogen.
2. Ein feststehender Tooltip ist momentan nicht möglich. Aber das wäre fast mit normalem CSS einfacher zu lösen. Einfach ein Div positionieren und ausblenden und dann bei :hover einblenden:
Ich habe einen feststehenden Tooltip
Hier der Code:
<style type="text/css" media="screen">
.menuitem {
position: relative;
}
.menuitem .tooltip {
position: absolute;
top: -30px;
display: none;
}
.menuitem:hover .tooltip {
display: block;
width: 100px;
background-color: #e4e4e4;
}
</style>
<div class="menuitem">
<div class="tooltip">Tooltip</div>
Ich habe einen feststehenden Tooltip
</div>
Hey,
danke für den Code, nur leider funktioniert er nicht. Komischerweise funktioniert aber der Tooltip in deinem Kommentar oO
Entweder der Code ist falsch oder ich bin zu dumm um ihn richtig zu kopieren :/
Vielen Dank!
Das ist komisch, denn es ist exakt der gleiche Code. Sonst versuche doch den original Code aus der Seite zu kopieren. Und natürlich muss das Ganze noch in ein richtiges HTML Grundgerüst gepackt werden. Aber das ist dir sicherlich auch klar. :)
Habe alles versucht, funzt bei mir net: http://www.honfights.com/design/asd.html
Ich bin etwas verwirrt, warum das so nicht funktioniert, aber wenn du die eine Zeile wie folgt umänderst, funktioniert es bei mir:
.menuitem:hover .tooltip {
abändern in
div.menuitem:hover .tooltip {
PS: Scheint übrigens nur im Firefox nicht zu funktionieren, in Safari oder Chrome funktioniert auch die alte Version bei mir.
Danke, jetzt funktionierts im FF und Opera…und wo wohl nicht? Richtig, im IE7 :/
Haste dafür auch ne Lösung?
Danke schonmal^^
Ah ja, der gute alte IE7 ziert sich mal wieder.
Versuche mal einen DOCTYPE in deinen HTML Code zu packen! :o)
Also bei mir geht es im allen Browsern.
IE8 – Firefox – Google Chrome – Opera.
Dennoch habe ich ein anderes Problem:
Ich lasse meinen Tooltip aus einer Datenbank generieren.
$query = "SELECT * FROM teamcms_actives WHERE team_id = '$set_id'";$result = mysql_query($query);
while($row = mysql_fetch_array($result))
{
echo "<a href='change_playerdetails.php?id=$row[0]' rel="nofollow">$row[1] $row[2]</a>
<a href='delete_player.php?id=$row[0]' rel="nofollow">löschen</a> /
<a href='move_player.php?id=$row[0]' rel="nofollow">neuem Team zuordnen /
<a> onmouseover="XBT(this, {id:'tt1'})">neues Bild hochladen</a>
<?php echo "
$row[6]";
}
Nun passiert es leider, das immer das erste Bild des Users (id=$row[0]) angezeigt wird , danach der zweite, dritte, vierte usw., egal auf welchen link ich gehe, das Tooltip ist nicht das, das eigentlich aus der $row[6] angezogen werden müsste.
Hat da jemand eine Idee – wo mein Fehler liegt?
Kann das sein, dass der von dir gepostete PHP Code nicht ganz stimmt?
Was mir auf jeden Fall auffällt ist, dass du eine feste ID=’tt1′ für den Tooltip vergeben hast, da du aber mehrere Tooltips generierst, müsste eigentlich jeder eine eigene ID haben.
Vielleicht kannst du mir ja mal deine komplette PHP Datei schicken (nicht hier in den Kommentaren!) dann schau ich mir das mal an.
Das ging ja jetzt aber fix !
mach ich doch glatt sofort.
Tolles Script, sowas hatte ich lange gesucht.
Ich habe aber noch ein Bitte…
Ich nutze das Tooltip mit ziemlich viel Inhalt. Die Beschränkung der Breite des Tooltip funktioniert auch; wenn aber das Element, über dem der TT erscheinen soll, recht weit rechts ist schiebt es den Inhalt quasi aus dem Monitor raus:
http://www.flamma-obscura.de/_temp/temp.jpg
Wäre das möglich, das wenn der Tooltip mitbekommt, das er rechts anstößt, sich quasi nach links verlagert; sodass immer alles sichtbar bleibt?
Hello…
Erstklassiges Script aber ein Fehler ist noch enthalten:
Bei „Inhalt als Konfiguration übergeben“ muss im onmouseover-event nach „text: ein ‚ eingefügt werden, sonst gibt es eine Fehlermeldung für die entsprechen Zeile.
Zur Info: Tested in
Safari 4.0.5 (ohne Probleme)
Netscape 7.1 (ohne Probleme)
Chrome 6.0.472 (ohne Probleme)
Firefox 3.6.9 (ohne Probleme)
iE 6.0
Opera 10.01
Ein kleine Frage habe ich auch noch:
Hast du vllt noch einen Script oder eine Erweiterung parat, wie man die Divs langsam erscheinen lassen kann, also nicht so abrupt?
Bei Opera und dem iE taucht das Div erst an der Stelle auf, wo es eingebunden ist und springt dann zur Position, welche absolut zu der des Zeigers ist, was man ja mit einem Einblenden unterbinden könnte.
ich hab ein kleines problem: bei mir funktioniert die korrekte position des tooltipps nicht im ie. beim firefox ists super, aber beim ie steht der tooltipp immer an der selben stelle. was kann ich machen, dass der toopltipp immer „mitwandert“.
beste grüße
christian
Danke für Eure Hinweise. Ich werde mir das Script noch einmal genauer im IE ansehen und testen.
@Thomas: Hier habe ich das Script mal so angepasst, dass es nun nicht mehr aus dem Fenster verschwindet, sondern am Rand stehenbleibt.
http://jsfiddle.net/katBX/2/
Vielleicht hilft dir das weiter.
Hallo webmatze,
ein Klasse Tooltip-Skript, das genau so einfach zu handhaben ist, wie ich es brauche :)
Was das rechts-anstossen/rausragen angeht, möchte ich mich Thomas anschliessen. Ich würd’s ja selber erweitern, aber weil ich zwar Javaskipt mag, Javaskript mich aber nicht, lass‘ ich da doch lieber Profis ran ;)
Nebenbei: Genügt dir ein Hinweis im Quelltext auf diese Seite als Quellenangabe?
Viele Grüsse
Freut mich dass es dir gefällt. :)
Was das Problem mit dem rechts anstoßen angeht hatte ich eine Antwort vor dir einen Link zu einer angepassten Version gepostet, wo genau dieses Problem behoben wurde. Schau einfach mal nach. ;)
Hallo webmatze,
ich war dem Link gefolgt. Im Beispiel bleibt der Tooltip zwar rechts stehen, aber ich konnte im Code die Einstellung dazu bzw. den Unterschied zum hier gezeigten Code nicht finden. Könntest Du das evtl. noch mal genauer erklären? Wäre wirklich hilfreich. Vielen Dank!
Hallo ACO,
klar kann ich das. geändert habe ich einfach die folgenden beiden Zeilen in der move function:
tooltip.style.top = (event.pageY+config.y) + "px";tooltip.style.left = (event.pageX+config.x) + "px";
Und gegen diesen Code ausgetauscht:
if (event.pageX+config.x+tooltip.offsetWidth < (window.innerWidth || (document.documentElement && document.documentElement.clientWidth) || document.body.clientWidth)) { tooltip.style.left = (event.pageX+config.x) + "px"; } if (event.pageY+config.y+tooltip.offsetHeight < (window.innerHeight || (document.documentElement && document.documentElement.clientHeight) || document.body.clientHeight)) { tooltip.style.top = (event.pageY+config.y) + "px"; }Du kannst aber auch einfach den kompletten JavaScript Code von der verlinkten Seite nehmen und gegen den alten austauschen.
Hallo webmatze,
dein Script ist klasse, nun habe ich aber noch eine Frage dazu:
Ist es möglich, den Tooltip erst dann „verschwinden“ zu lassen, nachdem ich den Tooltipp-Inhalt verlassen habe?
Ich möchte im Tooltipp selbst Links anzeigen zu lassen, welche dann auch klickbar sein sollen.
Danke schonmal im Vorraus!
Hallo, Ich möchte Das script in einen Header machen, er in einem echo-Befehl von PHP drin ist.
Praktisch find ich es, daß bei dem Script nur Gänsefüßchen verwendet wurden, so kann ich die einfachen Anführungsstriche benutzen.
Nur funktioniert das so garnicht.
Hab in meine Stylesheet-datei dieses xbtooltip-Tag reinkopiert, und auch mal testweise schlicht den HTML-Code eingebaut, wie er im Beispiel ist.
Aber selbst das funktioniert nicht.
Wenn ich das Script kopiere, macht der mir das in eine einzigste Zeile.
Kann das die Ursache sein ?
sorry, aber ich habs mit dem Link da weiter oben hingekriegt, dass ich es richtig kopieren kann.
Jetzt funktionierts :)
Fast…
http://skyranger.homeip.net/img/tooltiperror.png
er zeigt mir alle tooltips zwar an, aber schon bevor ich mit der Maus drauf geh.
Wenn ich mit der Maus drüber war, dann sind se weg, und werden nur noch angezeigt, bei mouseover.
Abgesehen davon, kann ich dieganzen Wörter, die diese Tooltips hervorrufen sollen nun nichtmehr schön in eine Zeile machen.
aberich denk mal, das sind nur Kleinigkeiten, die ich irgendwo übersehen hab ?
evtl. hat ja jemand nen Tip für mich.
habs gefunden.
In der Beschreibung steht NICHT dabei, dass man
.xbtooltip { display: none; position: absolute; background-color: #fff; }
NICHT in eine .css datei machen darf.
Und es steht NICHT drin, daß man es UNBEDINGT in den Header einbauen MUSS.
Normal macht man sowas in ne css-Datei, aber aus Verzweiflung habs ich zusätzlich noch in den Header rein, der vom php-script generiert wird, und schon klappts.
evtl. die Beschreibung mal anpassen, damits auch jeder hinkriegt :)
Geiles Tooltip-addon, find ich richtig klasse.
Wenns mal läuft, läufts :)
Hab das der Einfachheit halber in ne function gemacht, zum besseren aufrufen, dann brauch ich nur noch Parameter übergeben und schon klappts einandfrei.
Hmmm… das ist auf jeden Fall komisch. Normalerweise sollte das auch funktionieren, wenn es in einer externen CSS Datei steht.
Vielleicht wurde das durch irgend eine andere CSS Anweisung wieder überschrieben?
Kann man sich das Ergebnis irgendwo anschauen oder ist das noch geheim?
Wie kann ich Tabellen in einem Tooltipp darstellen?
Das Script bekommt irgendwie Problme mit \“ bzw. \‘
Wenn ich ne Tabelle darstellen will zeigt er mir garnichts an :o
Hallo fortiZ. Eine Tabllee würde ich am besten wie im folgenden Beispiel machen, indem du sie in ein extra DIV packst und dieses dann per ID im Tooltip ansprichst:
http://jsfiddle.net/webmatze/kb6pg/1/
Hallo webmatze,
wollte mich nur bei dir für den tollen Quelltext bedanken, funktioniert alles wunderbar.
Danke für deine Mühen.
hallo webmatze,
ein spitzen-tt-skript. vorallem das es auch browser-übergreifend so toll funktioniert.
hätte trotzdem noch 2 fragen:
1) kann dein skript – mit hinweis/backlink im sourcecode – auch auf kommerziellen seiten verwendet werden? unter welcher lizenz würdest du es anbieten?
2) ich würde den inhalt des tt-divs gern per ajax nachladen. an welcher stelle im skript müsste ich ansetzen? ein kleiner schubs in die richtige richtung genügt… ;-)
vielen dank schon mal im vorraus.
@emkey: Das Script kann gerne auch auf kommerziellen Seiten unter folgender Lizenz verwendet werden:
Cross-Browser Tooltip von Mathias Karstädt steht unter einer Creative Commons Namensnennung 3.0 Unported Lizenz.
Hallo webmatze,
ein ganz großes Dankeschön für dieses geniale Skript.
Getestet habe ich es im IE5, IE6, IE7, IE8, Mozilla Firefox 3.613, Opera 10, Google Chrom 8.0 und Safari 5.0.3.
Herrlich, es läuft und läuft und läuft. ;-)
Gruß
René
Hallo webmatze!
Tolles Teil, danke Dir.
Hab nur ein winziges Problemchen. Bei mir legt sich Dein TT im IE8 hinter andere Div’s.
Man müsste dem TT also ein z-index verpassen der so groß/klein ist, damit er auf jeden Fall andere div’s überdeckt.
An welcher Stelle müsste das eingefügt werden?
Danke Dir
Hallo Webmatze,
wenn ich dein Script einbinde und einfach nur erstmal das Beispiel ausprobieren möchte, habe ich das Problem, das der Div in dem das Tooltip noch im body angezeigt, wie hier http://img207.imageshack.us/img207/5190/problemyr.jpg im Bild.
Kann dir leider keinen Link zu meiner Page schicken, da das nur nen offline-projekt für die Uni ist.
Gruß
Entschuldigung für das Doppelposting!
Nachtrag:
Wenn man einmal über den Link gefahren ist, verschwindet das Div aus dem Body und wird als normales Tooltip, wie es auch funktionieren solllte, angezeigt.
Hallo Tobi, hast du vielleicht vergessen das oben gezeigte CSS einzubinden?
.xbtooltip {
display: none;
position: absolute;
background-color: #fff;
}
Dort ist nämlich definiert, dass der Tooltip standardmäßig nicht angezeigt wird. Erst durch das Script wird dieser dann wieder sichtbar gemacht.
Vielen Dank für die Antwort.
Welch eine triviale Lösung für das Problem :).
Super Arbeit, die du da gemacht hast!
Hallo Webmatze!
Noch eine Frage: Hast Du auch manchmal beobachtet, dass das Tooltipp hängen bleibt obwohl die Maus schon aus dem Bereich wieder raus ist?
Hab das manchmal im IE 8 gesehen, wenn ich einen Feldinhalt schnell markiert und danach sofort losgetippt und parallel die Maus wegbewegt habe blieb das Tooltipp stehen.
Der Satz sieht doof aus, soll aber zeigen, das alles sehr schnell geht, damit man das Problem sehen kann.
Super Skript! Vielen herzlichen Dank dafür!
Nach genau so etwas habe ich gesucht!
Ich habe jedoch ein Problem bekommen, als ich es in eine Webseite eingebaut habe:
Ich programmiere hier gerade eine Webseite mit Frames; in einem der Fenster läuft die Navigation, im anderen Fenster werden die erzeugten Daten angezeigt. Darin sollen dann auch die TipTools verwendet werden. Die Daten wiederum können so umfangreich werden, daß sie aus dem Frame herauslaufen, so daß in vertikaler Richtung gescrollt werden muß.
Wenn ich nun im anfänglich angezeigten Bereich einen Aufruf des TipTools habe, läuft alles prima; wenn ich jedoch nach unten scrolle und dort versuche, ein TipTool aufzurufen, wird nichts angezeigt.
Ich weiß leider gerade einmal, wie man „JavaScript“ schreibt, kann also nicht selbst nachforschen, woran das liegen könnte. Kannst Du mein Problem reproduzieren? Das wäre ja dann der erste Schritt – habe ich einen Fehler beim Implementieren gemacht, oder ist es ein systemisches Problem. Wenn ja – hast Du vielleicht eine Lösung?
Zwei Dinge habe ich noch vergessen zu erwähnen:
Ich arbeite auf dem Firefox als Browser – den IE habe ich in bezug auf dieses Problem noch nicht ausprobiert.
Wenn man das ToolTip in der Nähe des rechten Bildrandes ausprobiert geht es nicht über den Bildrand hinaus, so wie beabsichtigt – der Bildrand ist jedoch der rechte Rand des Scrollbars, und das TipTool rutscht unter den Scrollbar, nicht über ihn.
Gibt es eine Möglichkeit, XBT auch auf Elemente anzuwenden, die in Formularen und Tabellen verschachtelt sind ?
Z.B.
geht nicht, aber
Ein normaler Tooltip…
geht.
CSS ist 1:1 von hier geklaut.
Hall Webmatze,
Script läuft super. Eine Frage:
Ich würde gern das Tooltip betreten können, da bei mir im Tooltip Links rein sollen.
Ich habs schon versucht mit „element.onmouseout = setTimeout(out, 3000);“ oder so ähnlich. Aber das funktioniert alles nicht richtig.
Hast Du einen Tipp?
Hallo,
zunächst mal danke für den Quelltext, ist es vielleicht möglich den Tooltip immer in der Mitte des Browserfensters zu öffnen, unabhängig davon wo der Link auf der Webseite plaziert ist. Habe leider keine Ahnung vom Programmieren, wäre deshalb toll, wenn jemand mitteilen könnte, was man im Quelltext ändern muss (oder ob es überhaupt geht).
Hallo Webmatze,
eines der wirklich besten Tooltops-Scripts, die ich bisher gefunden habe.
Eine Frage zu deinem wirklich gelungenen Script hätte ich. Gibt es bei der Positionierung des angezeigten Tooltips auch die Möglichkeit ohne feste Abstände von der Mausposition zu arbeiten?
Ich habe Thumbnails, die bei MouseOver eine vergößerte Darstellung zeigen, dabei variiert die Höhe und die Breite ist fest. Kann man da etwas tricksen, dass immer 50% der Höhe des zu vergößernden Bildes positioniert wird?
Gruß
Mike
Hallo Webmatze,
gibt es die Möglichkeit einer flexiblen anzeige des Tooltips?
So wie ich das erkenne kann man nur feste Werte (Pixel) zur Anpassung nehmen, oder?
Gruß
Der Elli
Vielen Dank für das viele Lob und eure ganzen Anfragen.
Natürlich ist es durchaus möglich, diese ganzen Features einzubauen. Aber dann würde dies natürlich nicht mehr ein „Einfaches Tooltip Script“ sein, sondern immer komplizierter werden.
Leider fehlt mir momentan auch die Zeit das Script entsprechend euren Anforderungen anzupassen.
Vielleicht findet sich ja jemand unter euch, der Lust hat, das Script zu erweitern? Ich werde dies dann gerne hier veröffentlichen.
Ich hoffe ihr könnt dies verstehen und freue mich auf eure Kommentare.
LG Mathias
Ich bin leider nicht wirklich gut in Java Script. Die Zeit wäre zwar da, aber leider müsste ich dafür erstmal jede Menge Bücher durchlesen, bis ich dein Können habe.
Schade, ich hätte gedacht da gäbe es eine einfache Lösung für das Problem :-)
Gruß
Elli
Hallo,
ich habe jetzt nene Problem:
Wenn ich nen Bild in ein Tooltip einbaue, wird das Bild in allen anderen Tooltips auch angezeigt. Auch wenn ich versuche andere Bilder in den anderen Tooltips einzufügen, funktioniert es leider nicht.
Codebeispiel eines Tooltips:
Toller Text
Unser…
Ich hoffe Du kannst mir helfen.
Gruß
Tobi
oh, wusste nicht das man HTML in den Beiträgen verwenden kann.
Hab dann hier mal hochgeladen.
Es scheint so, dass die Eigenschaften, die man einem Tooltip mitgibt auch auf alle anderen auch gelten.
Hallo Tobi,
das sollte eigentlich problemlos funktionieren. Hast du vielleicht nicht für jeden Tooltip eine eigene ID vergeben?
Hier ein Beispiel:
http://jsfiddle.net/webmatze/kb6pg/4/
Danke für die schnelle Antwort :).
Problem lag daran, dass ich bei dem onmouseover die ID nicht geändert habe, aber bei den DIV’s schon.
Hallo Webmatze,
ich nutze dein Script für eine Intranetseite.
Im Tooltip wird das Ergebnis einer Berechnung angezeigt.
Im Firefox klappt es einwandfrei, beim IE 7 kommt die
Fehlermeldung:
‚document.formname.inputname‘ ist Null oder kein Objekt.
Bei den anderen Inputfeldern, die direkt auf der Seite angezeigt werden (nicht im Tooltip) klappt es einwandfrei.
Hast du ev. eine Lösung?
Danke!
MfG Franz
hallo Franz, das Problem wird wahrscheinlich sein, dass das Script den Tooltip Inhalt praktisch an den Anfang der Seite kopiert und damit aus dem eigentlichen Formular entfernt. Somit funktioniert document.formname.inputname nicht mehr. Du müsstest dem Input Feld, welches sich im Tooltip befindet eine eindeutige ID geben und dann auf das Feld mit document.getElementById(‚idname‘) zugreifen.
Ich hoffe das hilft dir weiter.
Hallo Webmatze,
vielen Dank für die sehr schnelle Antwort und den super Tipp. Habe es sofort ausprobiert, hat wunderbar geklappt.
MfG Frank
Hallo Webmatze,
eigentlich will ich nur, dass die Box nicht sofort ausgeblendet wird und zB ein Link darin genutzt werden kann.
Hab jetzt schon einen Haufen probiert – klappt aber nichts.
Grüße
Matthias
hallo!
würde deinen tooltip gerne in einem xslt file ausprobieren. allerdings weiß ich nicht ganz, wie ich die id übergeben soll, da die klammern {} in xslt ebenfalls zur variablenübergabe verwendet werden und er mir diese einfach rauslöscht.
onmouseover=“XBT(this, {id:’tt3′})
Hallo Toni,
es gibt da eine Möglichkeit. du könntest den Tooltip als Element als dritten Parameter übergeben und als zweiten Parameter ein leeres Objekt.
onmouseover="XBT(this, new Object(), document.getElementById('tt2'))"Dadurch musst du keine {} Klammern verwenden, kannst aber dann auch die anderen Parameter nicht anpassen, so dass die Default-Einstellungen verwendet werden.