![[GREGEL DOT COM]](http://static.gregel.com/themes/mg/images/header1.jpg)
Schon länger verwende ich auf einer anderen Website und in meinem Forum die genialen Javascript Tooltips von Walter Zorn.
Am Wochenende habe ich es geschafft, diese auch in den Blog zu integrieren! Auch wie bei meinem ersten Plugin ging das relativ schnell und einfach unter zuhilfenahme der WordPress Shortcode API.
Bei Mouseover erscheint nun bei mir der Tooltip und verschwindet bei Mouseout auch wieder – es sei denn, man klickt auf den Link!
Hat jemand Interesse an dem Code? Dann schreibe ich es mal zusammen, sind ja nur ein paar Zeilen…
Aktuelle Suchbegriffe:
- wodpress tooltips /
- best tooltip plugin for wordpress /
- wordpress highslide html content /
- walterzorn tooltip wordpress /
- dynamische tooltips javascript /
Chris
sagte am 1. Dezember 2008, 11:16 UhrWürde mich sehr interessieren, ja – da das eine interessante Alternative zum *highslide-with-html* sein könnte, welches in wordpress leider so überhaupt nicht funktionieren will. Zumindest bei kürzeren Infotexten überlegenswert. Schnippsel wäre also nett :-)
Grüsse
Chris
sagte am 1. Dezember 2008, 11:27 UhrHat sich erledigt :)
Die nötigen Javascript-Dateien einfach im Theme-Ordner speichern, im BodyTag der header.php includieren und ganz normal im WP-Editor beim gewünschten Link ansprechen ( Bspw. onmouseover=”Tip(‘Some text’)” onmouseout=”UnTip()” )
Simpler geht´s nimmer ;-)
Vielen Dank für die Inspiration
Chris
sagte am 1. Dezember 2008, 12:21 UhrHallo nochmal :)
Dieses Skript ist wesentlich vielseitiger einsetzbar als erahnt. Entfernt man das *onmouseout* und fügt den *closebutton* hinzu bleibt der Tooltip natürlich offen. Gibt man ihm eine fixe Position sowie Grössenangaben, und eine onclick-Funktion kann man somit ein Popup simulieren, hilfreich für viele die mit hover:span arbeiten und sich ärgern dass der Container nicht liegen bleibt. In Kombination mit dem fade-Kommando erzielt man so interessante Effekte, bspw. auch für Bilder.
Ich spare mir mit diesem Skript gerade zwei bereits integrierte JS, die früher Popups und Thumbnails gesteuert haben, die Usability wird dadurch deutlich verbessert. Von der Pflege ganz zu schweigen. Lässt man die onmouseover-Funktion ganz weg lassen sich somit unzählige versteckte Informationstexte auf Befehl aufrufen.
Für alle die highslide für Texte in WP verwenden wollen ist dieses Skript also eine absolut empfehlenswerte, und einfach zu bedienende Alternative die problemlos funktioniert. Da das Tooltip auch HTML unterstützt lässt sich das ganze mit ein wenig Spielerei sicher sogar noch dynamischer gestalten. Ich bin begeistert :) Danke nochmal.
bensch
sagte am 26. Februar 2009, 01:34 Uhrhallo!
also das klingt sehr interessant was du da gebaut hast. ich war gerade auf der suche nach einem tooltip plugin für wordpress, mit dem ich eine bildervorschau machen kann bzw. überhaupt bilder anzeigen kann.
gibt es denn deine Arbeit als fertiges plugin?
bensch
sagte am 26. Februar 2009, 03:31 Uhralso ich habe es jetzrt mal sleber in wordpress integriert, leider funktioniert es noch nicht. man kann ja eigentlich nicht viel falsch machen….gibt es noch irgendwas besonderes zu beachten?
Marc
sagte am 26. Februar 2009, 09:53 UhrMoin bensch!
Ich schaue heute abend nochmal nach, wie ich das alles so gemacht habe… Aber Bilder anzeigen ist soweit ich weiß nicht sonderlich schwierig – oben im Artikel funktioniert das ja prima!
Chris
sagte am 26. Februar 2009, 11:36 UhrHallo bensch :)
Soweit ich mich erinnern kann müssen den Bildern Grössenangaben zugewiesen werden damit der Tooltip sie anzeigen kann, und zwar direkt im img-tag. Wenn der Tooltip auch ohne Bilder nicht funktioniert sitzt die Javascript-Anweisung vermutlich falsch, die muss in der header.php im body-tag (nicht! im head) liegen.
bensch
sagte am 26. Februar 2009, 13:13 Uhrja das hab ich auch alles beachtet….leider gehts trotzdem nicht…also mit bildern habe ich es noch gar nicht gestestet, erstmal nur mit text…da ich die bilder dann dynamisch mit custom fields zuweisen will.ich hab auch zu rsicherheit mal einen blick in deinen quellcode geworfen, eigentlich ist alles identisch…..
Chris
sagte am 26. Februar 2009, 13:22 UhrUnd Du hast natürlich auch daran gedacht die URL zum JS etc. entsprechend abzuändern? *g* Ist übrigens nicht mein Quellcode sondern Marcs ;)
bensch
sagte am 26. Februar 2009, 13:27 Uhrja also da die .js im themeverzeichnis liegt, braucht man ja keinen pfad angeben (ich habs trotzdem auch mal mit ner absoluten pfadangaben versucht)…trotzdem ohne erfolg…
wenn du meine seite aufrufst, dann siehst du den aufruf ungefähr in der zeile 60, quasi im permalink des loops…
Marc
sagte am 26. Februar 2009, 13:35 Uhrbensch, du hast das JS mit falschem Pfad eingebunden…
Unter deinem Body-Tag… mach dort einen absoluten Pfad. Ich habe das via Variable gelöst, kann ich später mal posten.
Dort liegt def. schonmal ein/das Problem!
Chris
sagte am 26. Februar 2009, 13:40 Uhr*schulternzuck* Hab ich´s nicht gesagt? ;)
bensch
sagte am 26. Februar 2009, 13:46 Uhrja wie gesagt, dashatte ich schon versucht, aber ohne erfolg…
Marc
sagte am 26. Februar 2009, 13:53 UhrMomentan ist aber immer noch was faul:
The requested URL /wordpress/wp-content/themes/workbensch/wz_tooltip.js was not found on this server.
bensch
sagte am 26. Februar 2009, 13:54 Uhrhä? versteh ich nich…das script is definitv da….
bensch
sagte am 26. Februar 2009, 13:56 Uhroh ich seh grade der pfad hat nen ordner zuviel ;)
bensch
sagte am 26. Februar 2009, 13:58 Uhrnaja…geht trotzdem noch nicht :(
Marc
sagte am 26. Februar 2009, 14:19 UhrHmmm… lad die JS-Script Datei nochmal neu hoch.
Damit ist irgendwas faul, wird nicht wirklich als Javascript erkannt.
Hast du die irgendwie editiert?
bensch
sagte am 26. Februar 2009, 14:47 Uhrneee hab ich nich editiert…nachm neu hochladen isses auch nich besser
Chris
sagte am 26. Februar 2009, 15:07 UhrIch behaupte jetzt einfach mal das liegt an der Reihenfolge der Einbindungen…im head stehen nämlich noch mindestens 3 weitere Javascripte. Ich unterstelle dass da das Problem liegt und würde diese ebenfalls in den Body nach(!) dem Tooltip mal einfügen.
bensch
sagte am 26. Februar 2009, 15:13 Uhralso die scripte werden dynamisch eingetragen und stammen vom nextgen gallery plugin. ich habe es mal deaktiviert, aber das bringt leidfer auch nix…echt zum verzweifeln! dabei bin ich ir zeimlich sicher dass meine idee umsetzbar wäre….
Marc
sagte am 26. Februar 2009, 16:44 UhrNextgen Gallery verwende ich auch, das passt.
Was mir auffält: Wenn ich bei mit die tooltip.js im Browser aufrufe, bekomme ich ein JS-file zum download angeboten. Bei dir erscheint die *.js wie ein textfile direkt im Browser zum lesen.
Dein FTP-Programm sollte ja die Übertragung entweder im ASCII-Mode oder binär durchführen. Teste das mal… richtig solle IMHO ASCII sein…
bensch
sagte am 26. Februar 2009, 17:20 Uhrmh also kein plan wo man das genau einstellt..habs einfach mal mit nem ander ftp probiert, baer das problem bleibt leider…komisch dass man die datei nicht zum download angeboten bekommt
ich bekomm auch nur n text file angezeigt…
Marc
sagte am 26. Februar 2009, 20:45 UhrJa, da ist irgendwas faul… Hast du nochmal neu von der Walter-Zorn-Seite heruntergeladen?
Ansonsten gehen mir leider auch erst einmal die Ideen aus…
Chris
sagte am 26. Februar 2009, 21:19 UhrIch bin auch erstmal für die falsche Übertragungsmethode, wäre eine Erklärung für das Textfile. Allerdings müsste dann auch beim Laden der Site eine Fehlermeldung erscheinen. Alternativ würde ich mal den browserseitigen Tooltip entfernen, vielleicht mögen die sich gegenseitig auch einfach nur nicht.
bensch
sagte am 27. Februar 2009, 02:45 Uhrhallo
also ich hab mit mal das script von eurem webspace gezogen und das alte ersetzt und un gehts…zumindest aufnem lokalen apacje server….scheint wohl irgendwie am script zu liegen…
jetzt funktionierts ebenfalls auch auf meinem webspace….
man sollte dem walter evtl mal bescheid geben….klingt zwar alles bisel unlogisch aber wenns mit euerem skript geht und mit seinem irgendwie nicht….i dont know :)
Chris
sagte am 27. Februar 2009, 02:54 UhrWir, also ich zumindest, und Marc wie ich vermute ebenfalls, haben unsere Scripte aber auch recht freizügig editiert und unseren Bedürfnissen angepasst – durchaus möglich dass es an einer simplen Standarteinstellung im Original lag die bei uns eben nicht mehr gesetzt ist, und darum geht es mit dem Script dieser Source hier plötzlich. Jedenfalls freut es mich dass es jetzt läuft – wenn nur alle Probleme so simpel zu lösen wären ;) LG
bensch
sagte am 1. März 2009, 17:54 Uhrhallo leute,
also ich ahbe nun ein wenig rumexperimentiert…leider werden wohl die template tags von wordpress nicht interpretiert bzw. ignoriert wenn man sie in die javascript aufrufe im linkt packt. ich heb auch schon mal bei walter zorn gefragt inwie weit das begründet ist. aber der hat keien ahnung von wordpress . deswegen dachte ich ich geh euch noch ein bissel auf die nerven ;)
mein vorhaben ist halt einfach mit ein custom field auszulesen in dem eine grafik referenziert ist… da ich eher ein bastler als coder bin dachte ich, ihr könnt mir evtl weiterhelfen…
Chris
sagte am 1. März 2009, 18:09 UhrHi bensch.
Was meinst Du mit Template Tags genau? Den PHP Teil oder den CSS? Bei CSS weiß ich zumindest dass das Skript keine Stylesheetangaben mag, die müssen dann innerhalb des HTML Tags ausgeschrieben werden. Ich selbst arbeite tagtäglich mit WP, und habe keinerlei Probleme mit diesem Skript.
Hast Du die zweite Variante auch schon einmal ausprobiert, und mit SpanID´s gearbeitet statt den zu generierenden Content im Tooltip direkt zu platzieren? Das mache ich eigentlich generell, weil ich mit dem anderen auch schon öfters mal Konflikte hatte.
LG
bensch
sagte am 1. März 2009, 18:56 Uhralso tempalte tags sind die von wordpress vorgegeben php befehle mit denen man die daten es blogs ausliest.
es gibt z.b wp_the_meta, damit kann man schlüssel/wert paare aus den custom field auslesen.
mit der formatierung habe ich eigektlich keine probleme…also css etc kann ich im schlaf…das passt schon.
mir gings eher darum, dass wenn man einen link definiert, und in die javascript aufrufe im link //onmouseover=”Tip(‘hier würde der php befehl stehen’)”// das php halt ignoriert wird bzw. nicht verarbeitet wird.
man kann mit dem tooltip von w.zorn halt keinen
dynamischen content aufrufen, der aus einer datenbank stammt.
hier mal ein beispeil was ich machen will:
http://bestwebgallery.com/
wenn man über die bilder fährt kommt ein tooltip mit ner bildervorschau. genau das will ich auch umsetzen, und das bild müsste vom tooltip halt aus der wp-datenbank ausgelesen werden…ich hoffe ich habs verständlich erklärt ;)
bensch
sagte am 1. März 2009, 19:06 Uhralso ich weis nich ob ich deinen tip richtig verstanden habe….mit den span IDs
Marc
sagte am 1. März 2009, 19:16 UhrHi bensch…
Also wenn dein Problem die Ausführung des php-codes ist, brauchst du (zusätzlich) das Plugin exec-php… dann sollte es laufen!
Chris
sagte am 1. März 2009, 19:17 UhrEtz hatte ich so viel geschrieben gehabt, und Du machst das mit einem Plugin alles kaputt *fg*
bensch
sagte am 1. März 2009, 19:24 Uhrmh nee das glaub ich nich, weil exec-php nur dazu dient, php in posts und pages zu interpretieren.
mine link steht ja in der loop direkt drin, somit auch direkt in der eigetlichen seite….also ich habs trotzdem mal getestet, bringt aber nix leider…also ich glaube eher das problem is das das wz script kein php interpretieren kann….
Chris
sagte am 1. März 2009, 19:26 UhrAlso mal Plugin hin oder her: HTML führt das Tooltip soweit ich weiß eh nur aus wenn Du mit den erwähnten Spans arbeitest. Im Tooltip-Tag direkt nimmt er soweit ich weiß kein HTML an, also somit natürlich auch kein PHP. Wenn überhaupt geht das also nur mit dem Span.
bensch
sagte am 1. März 2009, 19:57 Uhrmh könntest du das mal näher erklären, da steig ich grad nich so dahinter….also wenn ich das ganze in nen span verpacke bewirkt das auch nix…
Chris
sagte am 1. März 2009, 21:44 UhrAlso nichts für ungut, aber das kann man alles auf der Walter Zorn Seite nachlesen, da muss ich nicht viel erklären.
http://www.walterzorn.de/tooltip/tooltip.htm unter weitergehende Gestaltung.
bensch
sagte am 2. März 2009, 00:55 Uhrhalloo nochmal,
also vielen dank für eure hilfe. ich habe es nach langem probieren endlich hinbekommen. wenn man es sich jetzt anaschaut sieht es echt nicht schwer aus, aber irgendwie brauch man echt phantasie dazu… ;)
mit dieser span geschichte wurde irgendwie immer nur das erste custom field ausgelesen…das war nicht der richtige weg.
falls ihr euch für die umsetzung interesssiert kann ich euch gern zeigen wie ichs hinbekommen habe…
also eine gute nacht erstmal soweit!
Chris
sagte am 2. März 2009, 01:23 UhrNaja, immerhin wurde was mit dem Span ausgelesen, ist doch auch was *g* Ja, interessieren würde es mich sehr – kann nicht schaden :) Aber erstmal gute Nacht
Petra
sagte am 3. August 2009, 22:21 UhrHallo,
erstmal schön, dass ich Euch/Dich gefunden habe. Ich bin nämlich schon den ganzen Tag dabei ein tooltip zu finden in das ich ein Bild einbinden kann. Jetzt steh ich aber schon wieder auf dem Schlauch, ich finde das Java-script dazu nicht. Bei Walter Zorn gibts ja die Weiterleitung auf eine andere Seite, aber da bin ich heillos verloren, könnt ihr mir bitte weiterhelfen.
erstmal viele Grüße
Chris
sagte am 3. August 2009, 22:25 UhrHallo Petra.
Wenn Du auf den obigen Link “Javascript Tooltips” gehst kommst Du ja auf die Seite von Walter Zorn. Dort rechts oben gibt es einen Link “Download” – wenn Du dem folgst, ganz unten die Datei wz_tooltip.zip – darin befinden sich die Scripte.
Grüssle: Chris :)
Petra
sagte am 3. August 2009, 22:39 Uhrvielen Dank, dass du so schnell geantwortet hast, ich habs auch gleich gefunden und das schript im Theme gespeichert. Aber wie gehts jetzt weiter?
“”" im BodyTag der header.php includieren und ganz normal im WP-Editor beim gewünschten Link ansprechen ( Bspw. onmouseover=”Tip(’Some text’)” onmouseout=”UnTip()” )
Simpler geht´s nimmer ;-)”"”
Chris
sagte am 3. August 2009, 22:49 UhrGerne :)
Ja, wie gesagt – du fügst
in der header.php in den Body Tag ein, ab besten direkt nach und änderst den Pfad zum Javascript noch entsprechend ab. Und im Editor, wenn Du Artikel schreibst, benutzt Du bspw. Homepage wie auf der Walter Zorn Seite beschrieben (natürlich in der HTML Ansicht editieren). Steht eigentlich alles wunderbar auf der Site beschrieben.
Chris
sagte am 3. August 2009, 23:51 UhrDer Beitrag wurde zerhackstückelt, sorry. Aber auf der Seite ist alles beschrieben. Wünsche gutes Gelingen. Chris
Petra
sagte am 8. August 2009, 12:01 UhrHallo Chris,
leider schaff ich das auch mit der Erklärung von walter zorn nicht . Ich versteh einfach zu wenig davon. könntest du mir bitte trotzdem helfen damit ich es noch hinbekomme, ich finds total tool.
1. Frage: Ich möchte es im WordPress einsetzten,wo genau spiele ich das “wz_tooltip.js” auf meinen Server? In den Plugin-Ordner, oder auf die Ebene von den wp-admin- content und includes Ordnern, oder sonst wo hin?
2. Frage: ich habe das “” in die header php eingespielt ist das so in Ordnung?
3.Frage: auf welchen Pfad verweist die index.htm?<a href="index.htm" onmouseover="Tip('Text mit Bild.’)” onmouseout=”UnTip()”> Spikes . welcher Pfad muß da rein?
wenn ich das einsetzte, verkürzt es mir alles und übrig bleibt
Bild.’)” onmouseout=”UnTip()”> Spikes .
komisch dabei ist auch, dass im Frontend nach speichern und veröffentlichen gar nichts sichtbar ist.
Für deine Hilfe bin ich dir sehr dankbar.
viele grüße, petra
Chris
sagte am 9. August 2009, 00:40 UhrLiebe Petra!
Wo Du das JS auf dem Server speicherst ist völlig egal, wichtig ist nur dass Du in der entsprechenden Codezeile, die Du in die header.php einfügst, richtig abänderst sodass die Pfadangabe stimmt. Wenn Du dir mit der Verzeichnisstruktur unsicher bist nimmst Du am besten den absoluten Pfad inkl. des http. Zu Frage 2 kann ich leider nichts sagen da ich nicht sehen kann was Du und wie Du es eingefügt hast. Dass er Dir aber deinen Code (#3) verkürzt liegt vermutlich einfach nur daran dass Du den Link-Tag am Ende nicht geschlossen hast ;-) Ansonsten sehe ich da gerade auf Anhieb keine Fehler.
Petra
sagte am 9. August 2009, 17:27 UhrHallo Chris,
vielen Dank, dass du Dir Zeit für mein Problem genommen hast, leider klappt es immer noch nicht, es ist zu verzweifeln.
Was hat es denn damit auf sich?
Um ein Tooltip aus einem HTML-Element zu erzeugen, müssen Sie nur die ID des HTML-Tags an die Funktion TagToTip() übergeben:
Ist das wichtig weil das Bild doch in html ausgegeben wird?
Startseite
…
Irgendein Kommentarzur Startseite
Walter Zorn schreibt, dass man das bei Html-Elementen eingeben muss. Ich weis nur nicht was eine span id ist und wo ich diese ablesen kann.
Leider fällt das als Fehlerquelle aus, der Tag ist geschlossen.
Übrigens, wenn ich das Tooltip nur mit Text fülle funktioniert es super.
hoffe Du hast nochmals Zeit für mich.
viele Grüße, Petra
Chris
sagte am 9. August 2009, 20:53 UhrHallo Petra.
Die Span ID ist eine Identifikation für Informationen. Du gibst an anderer Stelle im Code einen Span (eine Art unsichtbarer Container in dem die Infos gespeichert werden) an, mit einer individuellen ID, vorzugsweise bestehend aus einem Schlagwort. Im Link-Tag ruft man dann die jeweils gewünschte Span-ID auf, so weiß das Script was es sich bei welcher Aktion holen soll.
Die entsprechende Anleitung findest Du unter 5. Alternative: HTML-Element in Tooltip verwandeln auf der Walter Zorn Seite, und weiterführend unter 6. HTML im Tooltip-Text .
Ich empfehle zudem sich ein wenig mehr mit den Basics von HTML und CSS zu befassen, das macht es auch für Dich einfacher, zumidest dann wenn Du länger mit dem oder anderen Scripten arbeiten willst. Denn auf der Seite ist wirklich alles beschrieben, aber wenn man die Funktionen nicht kennt kann man es auch nicht erklären.
Achte bitte auch auf die Schreibweise wenn Du HTML Elemente verwenden willst, da Du hier dann keine Apostrophe mehr verwenden darfst sondern Backslashes nehmen musst.
Zudem ist ein Link zur betreffenden Seite immer hilfreich. Aber wie gesagt: Wenn Du die Basics gar nicht erst kennst kann ich Dir auch schlecht erklären was zu tun ist.
Petra
sagte am 9. August 2009, 22:02 UhrHallo Chris,
schade, das ahnte ich heute schon, dass ich das nicht verstehen kann und mich gedulden muss. Das heißt dann wohl, erst mal die Basics lernen. Kann ja eigentlich auch nicht schaden :-)
viele Grüße und vielen Dank an Dich, Petra
Chris
sagte am 9. August 2009, 22:23 UhrLiebe Petra,
es geht auch gar nicht nur um das reine Verständnis ansich, sondern darum…selbst wenn ich es Dir erklären könnte, und dann alles funktionieren würde…dann käme binnen kürzester Zeit die nächste Frage, aufbauend auf meiner Erklärung, und die nächste, und so weiter, obwohl alles eigentlich zusammenhängt. Es ist also wesentlich effektiver sich selbst einzuarbeiten – eine genau Anleitung direkt bringt Dir überhaupt nichts, weil das ganze Drumherum trotzdem ein grosses Fragezeichen bleibt. Weißt was ich meine?
Aber ich kann Dir SelfHTML empfehlen, das gibt es auch online, und tutorials.de – sehr gutes Forum, aber auch hier wird erwartet dass man aktiv selbst mitarbeitet und dazulernt. Auf mediengestalter.info findest Du sicher auch Hilfe wenn Du lieb fragst :) Ist auch wesentlich einfacher als hier – weil man dort besser reagieren und interagieren kann. Gregels Blog ist halt auch einfach keine Plattform für sowas. Ist eben ein Blog.
Zu danken gibt es nichts, habe ich gern gemacht. Aber lass mich wissen wenn es geklappt hat :)
LG:Chris
Nik
sagte am 26. Juni 2010, 18:02 UhrSeite leider nicht mehr verfügbar! :/