html tooltip
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anleitung
attribut
code
darstellen
datei
einbindung
ende
funktion
http
info
item
maus
position
ruck
setzen
tag
text
url
verwenden
weben
-
Ich habe einige Bilder, bei denen beim mit der tag/maus">Maus rüberfahren ein javascript code ausgeführt wird. Dieser Code erzeugt einen html code(eine div mit einer tabelle), es soll dann eine art Tooltipp angezeit werden, die diesen html code anzeigt.
Hat jemand eine Ahnung wie sowas gehen könnte, wichtig ist, dass der tooltip, die darunterliedene html ebene auf keinen Fall beeinflussen darf. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Guten Tag,
ich kann dir die Tooltips von blog.kuschku.de empfehlen.
Ist dann aber ohne js und so...
Grüße webaffe -
möchte eigentlich kein framework oder so was verwenden. und erst mein javascriptcode erstellt den Code für den tooltip
-
Guten Tag nochmal,
seine Technik ist CSS und html, http://blog.kuschku.de/webdesign/css/bessere-tooltips/.
Viele Grüße nochmal -
Wie gesagt, ich verwende schon javascript um den code der den Tooltipp darstellen soll, also muss ich den tooltipp auch mit javascript realieseren
-
unlikus schrieb:
Wie gesagt, ich verwende schon javascript um den code der den Tooltipp darstellen soll, also muss ich den tooltipp auch mit javascript realieseren
http://www.walterzorn.de/tooltip/tooltip.htm -
Hab jetzt selbst eine Lösung gefunden. Und menschle, ich müsste den Code so verändern, dass ich ihn auch gleich selbst schreiben könnte
-
unlikus schrieb:
Wenn Du es selbst könntest, verstehe ich nicht so wirklich, warum Du dann erst hier fragst.
Hab jetzt selbst eine Lösung gefunden. Und menschle, ich müsste den Code so verändern, dass ich ihn auch gleich selbst schreiben könnte
Und wie sieht Deine Lösung nun aus? Wäre vielleicht für später nachlesende User ganz hilfreich. -
Bin erst später drauf gekommen.
das div wird an das ende des html documtens geschrieben mit position:abslulute in css, mit der id tooltip
jetzt kann man über javascript dem Div den Inhalt zuordnen und gleichzeitig display auf block setzen
und die css attribute top und left dann auf die Mauskoordinaten stzeten.
Das war das schwirigste, weil IE und FIrefox sich da sehr unterscheiden:
function koo(ev) { var posx = 0; var posy = 0; if(!ev)var ev = window.event; if (ev.pageX || ev.pageY) { posx = ev.pageX; posy = ev.pageY; } else if (ev.clientX || ev.clientY) { posx = ev.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; posy = ev.clientY + document.body.scrollTop + document.documentElement.scrollTop; } return new Array(posx,posy); }
Wichtig: an die funktion muss event übergeben werden, und zwar aus dem html tag.
und beim verlassen der Maus wird display auf none gesetzt -
Hallo unlikus,
ich persönlich benutze am liebsten die Tooltip-Variante der Web Toolbox.
http://www.web-toolbox.net/webtoolbox/dhtml/info-box01/info-box01.htm
Dort findest du alles mit einer ausführlichen Erklärung und vielen Beispielen.
Viele Grüße
Gentleman1
-
unlikus schrieb:
Wie gesagt, ich verwende schon javascript um den code der den Tooltipp darstellen soll, also muss ich den tooltipp auch mit javascript realieseren
Das ist mal eine originelle Antwort.
Und leider sinnfrei.
Du brauchst so oder so CSS dafür. Warum also noch zusätzlich kompliziertes JavaScript einarbeiten?
Warum einfach wenn es auch kompliziert geht.
Die erste Lösung von webaffe http://blog.kuschku.de/webdesign/css/bessere-tooltips/ ist eine saubere und einfache Lösung.
Und sie funktioniert definitiv überall, auch dort wo kein Javascript erlaubt ist.
Gib dir einen Ruck und mach es dir einfacher.
Beitrag zuletzt geändert: 1.12.2012 15:02:33 von kgreen -
Ich bin seit Jahren wunderbar zufrieden mit http://www.walterzorn.de/tooltip/tooltip.htm dem Tool des verstorbenen Walter Zorn.
Im Gegensatz zu JQuery kein Overkill sondern nur die Funktion. Dabei lassen sich die Tips sowohl global stylen, aber bei Bedarf einzelne auch separat stylen. Die komprimierte Version ist nur 19,6 k groß.
Einbindung einzelner Tooltips kann über eine ausgelagerte js Datei erfolgen oder als Bereich mit "ID" Der text bleibt dann für Suchmaschienen auffindbar.
Beispiel für letzteres, wobei man über die class allen möglichen css verwenden kann<span class="tt" onmouseover="TagToTip('ID');" onmouseout="UnTip();">TEXT</span><span id="ID"> ()</span>
Es empfiehlt sich den Strichpunkt wie hier zu setzen onmouseout="UnTip();" das wäre nach Anleitung nicht zwingend nötig aber tidy motzt.
Wer modernizer.js im <head> hat und seine js gesammelt in eine Datei ans Ende packt kann die wz-tools dort auch mit reinkopieren und muß nicht den in der Anleitung beschriebenen etwas unschönen Weg der Einbindung direkt hinter dem <body>-tag
-
geht auch ganz einfach mit html, zumindest bei list items:
einfach beim <li> tag das attribute title hinzufügen
Bsp:
<ul> <li title="Ich bin ein Tooltip!">Test</li> </ul> -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
