WP Wiki Tooltip ist ein WordPress Plugin mit dem man sehr einfach erklärende Tooltips für bestimmte Schlagworte in Artikel und Seiten integrieren kann. Der Inhalt der Tooltips wird per AJAX von einem angegebenen Wiki (auf Basis der bekannten Wiki-Software MediaWiki) geladen. Die Tooltips werden auf Basis des bekannten Paketes Tooltipster erzeugt.
Installation
Die Installation ist – wie bei jedem guten WordPress Plugin – recht einfach:
- Das Plugin steht direkt im WordPress Repository zur Verfügung. Außerdem kann man es sich von GitHub herunterladen und manuell ins WordPress einfügen.
- Nach der Installation muss man das Plugin aktivieren.
- Nun sollte man einen Blick in die Einstellungen werfen, denn zu mindestens ein Wiki in derselben Sprache wie der Blog, scheint sinnvoll.
- Und schon steht einer Verwendung über Shortcodes in Artikeln und Seiten nichts mehr im Wege 🙂
Einstellungen
Das Plugin richtet im Backend eine eigene Seite für seine Einstellungen ein. Diese ist unter dem Menüpunkt „Einstellungen“ zu finden. Die dort zu findenden Optionen sind in unterschiedliche Tabs aufgeteilt:
- Grundeinstellungen
Im oberen Teil der Seite kann man die verschiedenen verbundenen Mediawikis verwalten. Außerdem kann man auswählen, ob die Links zu den Wiki-Seiten im aktuellen oder einem neuen Fenster / Tab geöffnet werden sollen. Abschließend kann man den Trigger (Klick oder Hover) wählen und auch eine Mindestbreite definieren, die notwendig ist, um die Tooltips anzuzeigen. Seit der Version 1.8.0 gibt es auch einige Einstellungen im Falle, dass eine Seite nicht gefunden wird. - Fehlerbehandlung
Welche Fehlermeldungen sollen ausgegeben werden, wenn eine Seite oder ein Kapitel nicht geladen werden kann? Oder soll der Link komplett entfernt werden? - Design der Tooltips
Durch die Verwendung von Tooltipster für die Darstellung der Tooltips kann man eines von fünf Themes auswählen. Auch kann man eine der fünf Animationen für das Erscheinen der Tooltips auswählen. Um die Links zu Wiki Seiten optisch von allen anderen Link im Blog zu unterscheiden, kann man sie mit eigenen CSS Angaben versehen. Diese werden in das style-Attribute eingefügt. - Vorschaubilder
Es gibt verschiedene Optionen, um Bilder, die auf einer verlinkten Wiki-Seite vorhanden sind, bereits im Tooltip anzuzeigen.
Anwendung
Um einen Tooltip zu erhalten, muss man einfach einen Shortode in einem Artikel oder einer Seite einsetzen. Die Shortcodes können durch verschiedene Attribute erweitert werden:
[wiki]WordPress[/wiki]
oder
[wiki title="WordPress"]a nice blogging tool[/wiki]
oder
[wiki base="EN"]WordPress[/wiki]
oder
[wiki titel="WordPress" section="Themes"]Themes in WordPress[/wiki]
Weiter Informationen gibt es in der offiziellen Readme!
Features
Hier eine Liste mit gewünschten und bereits implementierten Funktionen:
| Funktion | Status | Version |
|---|---|---|
| Grundfunktionen | fertig | 0.5.0 |
| Eigene Seite im Backend | fertig | 1.0.0 |
| Deutsche Übersetzung | fertig | 1.0.0 |
| Richtige Implementierung der WordPress HTTP API | fertig | 1.2.0 |
| Design der Tooltips kann angepasst werden | fertig | 1.3.0 |
| Verwaltung mehrerer Wikis | fertig | 1.4.0 |
| Bilder der Wiki-Seiten können als Vorschaubilder im Tooltip angezeigt werden | fertig | 1.5.0 |
| Übersetzung „Deutsch formal“ erstellt | fertig | 1.5.1 |
| Unterstützung der Shortcode-Erstellung durch ein Plugin im TinyMCE Editor | fertig | 1.6.0 |
| Tooltips können per Klick oder Hover getriggert werden | fertig | 1.7.0 |
| Definition einer Mindestbreite, ab der Tooltips angezeigt werden | fertig | 1.7.0 |
| Fehlerbehandlung | fertig | 1.8.0 |
| Vorschau der Tooltips im Backend | fertig | 1.8.0 |
| Auswahl eines bestimmten Abschnittes einer Wiki-Seite | fertig | 1.9.0 |
| Auswahl der Animation zum Ein- und Ausblenden der Tooltips | fertig | 1.9.0 |
| Unterteilung des Backends in einzelne Tabs (Reiter) | fertig | 1.10.0 |
| Auch gesamte Wiki-Seiten im Backend anzeigen | geplant | |
| Automatische Tooltips für bestimmt Worte | geplant | |
| Caching der Inhalte der Tooltips, um Ladezeit zu sparen | geplant | |
| Laden aller Tooltip-Inhalte beim Laden der Seite, um Anzeige zu beschleunigen | geplant | |
| Schnittstelle zu Dokuwiki | geplant | |
| Gutenberg-Support – den Shortcode über das Kontextmenü der bekannten Blöcke einsetzen | geplant |
Unterstützung erwünscht!
Wenn du mich unterstützen möchtest, freue ich mich über eine kleine Spende 🙂
Wer inhaltlich etwas betragen möchte und Ideen und Anregungen zur Weiterentwicklung hat, kann diese hier gern als Kommentar hinterlassen!
Hello, and thank you for a fantastic plugin (wp wiki tooltip).
I just want to leave a tip on a possible feature. This plugin (https://wordpress.org/plugins/encyclopedia-lexicon-glossary-wiki-dictionary/) has the ability to add words to a list, these words will link directly without a shortcode in the editor.
Thanks Mikael for this idea! I will think about if it makes sense for my plugin and how to integrate in an future version 🙂
Vielen Dank für das tolle Plugin!
Leider gibt es seit der 1.4.0 Version nur noch Fehler. Ich nutze den Tooltip in Verbindung mit Wikipedia.org in der deutschen Version. Nur leider wir mittlerweile bei jedem Tooltip „Fehler!“ angezeigt. Bei jedem leider. Egal welcher Begriff. Vorher ging es tadellos. Selbst Begriffe die bereits funktionierten gehen nicht mehr. Gibt es irgendwelche Erkenntnisse? Würde mich über eine Hilfestellung sehr freuen.
Vielen Dank
Timo Hörske
Hallo Timo,
ich haben in den „Upgrade Notices“ geschrieben, dass beim Update auf die 1.4.0 die eingestellte Wiki-Basis-URL nicht mit übernommen wird! Du musst nach dem Update also unbedingt in der Einstellungsseite vorbeischauen, um dort die deutsche Wiki-Basis einzustellen. Dann sollten auch die schon bestehenden Tooltips weiter funktionieren! Schreib hier bitte, ob es so geklappt hat…
Beste Grüße
NiDa
Das hatte ich gesehen und auch gleich umgesetzt. Leider bisher ohne Erfolg.
Aber ich probiere es gerne nochmal aus.
Habe es nochmal überschrieben und gespeichert. Jetzt gehts. Komisch.
Vielen Dank
Wunderbar, das freut mich!
Erstmal vielen Dank für das tolle Plugin – es ist wirklich das was ich gesucht habe und funktioniert super!
Ich hätte noch 2 Anregungen:
1) Manchmal ist die Ladezeit bei aktivierten Thumbnails/Bildern bei mäßigerer Internetverbindung etwas lang. Wenn man die Tooltips dann aber einmal durchs Hovern oder Klicken gesehen hat, ist die Datei wahrscheinlich im cache (?) gespeichert und wird dann ohne Verzögerung angezeigt. Ich bin WordPress und Code-Neuling aber wäre es vielleicht möglich eine Option anzubieten, dass die Thumbnails bereits beim Laden der Seite im cache gespeichert werden und sie damit – sobald die Seite einmal ready ist – sofort angezeigt werden? Ich habe mal einen Workaround gesehen, bei dem die Seite beim Aufrufen noch keine Tooltip-Links hatte und diese erst nach und nach hinzukamen, als diese dann eben auch geladen waren.
2) Bei chemischen Seiten, die einen gelben Informationskasten auf der rechten Seite haben wird anstelle des Textes direkt unter der Unterschrift der Text aus der meist sehr kurzen Kurzbeschreibung im Kasten angezeigt. Ich weiß nicht ob das so gewollt ist – falls nicht könntest du ja mal darüber nachdenken, das Plugin den üblichen Text greifen zu lassen. Als Beispiel wäre hier z.B. die folgende Seite zu nennen: https://de.wikipedia.org/wiki/Bortriiodid. Anstelle von dem Text unter der Überschrift „Bortriiodid ist eine chemische Verbindung aus der Gruppe der Bor-Halogen-Verbindungen bzw. anorganischen Iodverbindungen.“ wird nur der Text aus dem Kasten „farbloser Feststoff“ verwendet.
Auch mit den kleinen Änderungswünschen ist das Plugin nach wie vor wirklich gut und wird auch weiter von mir verwendet.
Liebe Grüße aus Berlin
Marian
Hallo Marian,
vielen Dank für dein Feedback und die Spende!!!
Auf welcher Seite verwendest du das Plugin? Würde ich mir gern einmal anschauen!
Danke auch für die beiden Tipps! Die Idee, wahlweise den Inhalt nicht erst mit AJAX zu laden, sondern gleich beim Seitenaufbau, werde ich einbauen!!! Das Problem mit den chemischen Elementen schaue ich mir an. Gibt es da noch andere Seiten mit diesem Problem?
Beste Grüße
Nico
Danke für das Plugin! Ich musste allerdings etwas rumprobieren: Die Tooltips vertragen sich nicht mit Autoptimize, genauer gesagt dessen „JavaScript-Code optimieren“-Option.
Gibt es eine Möglichkeit, die Anzeige mehrerer Absätze bzw. der gesamten Wiki-Seite ohne (Link auf das Wiki selbst) zu erzwingen? Ich will das Wiki ausschließlich als Datenbasis für ein Namensverzeichnis (mit mehreren Hundert Tooltip-Einträgen) nutzen und dessen Oberfläche selbst vor den Nutzern verbergen.
Gruß Rüdiger
Hallo Rüdiger,
vielen Dank für dein Feedback und sorry, dass ich erst heute reagiere! Business ist aktuell sehr stressig 😉
Die Sache mit der Kompatibilität mit Autoptimize schaue ich mir die Tage mal an.
Die Möglichkeit, auch eine komplette Seite in dem Tooltip anzuzeigen und auch den Link auszublenden, werde ich einbauen. Sollte ich eigentlich recht fix hinbekommen…
Beste Grüße
Nico
Hallo Rüdiger,
sorry, dass ich nun doch fast ein Jahr gebraucht, aber mit dem heutigen Update sollten die Probleme mit Autoptimize erledigt sein.
Deine Feature-Ideen mit der vollständigen Anzeige kommt als nächstes!
Beste Grüße
Nico
hi
I want to change the text direction of the balloon text to RTL and make the text justified. But I could not find its CSS file. Could you please tell me how can I do that?
Thanks,
Saeed
Hi Saeed,
would it be enough if you write ‚direction: rtl;‘ in the backend field for styling the tooltip content?
Thank you for your reply. In fact, I know a some basic CSS and I have been searching for exact tag name of balloon CSS properties using plugin editor and looking at the page source, and still couldn’t find its tag name and file location. So I simply placed direction:rtl into *{} (all elements) in additional css theme style, which works somehow, but seems that it is not a good way. I just want to edit the balloon, not all page elements. besides, text alignment is not solved for me yet. Sorry again…
Once again Saeed, the easiest and best way is to add your style in the field you find on the settings page!
If you really want to change the CSS of your template, here is the HTML structure of the baloon:
<div class="wiki-tooltip-balloon">
<div class="head">THE TITLE</div>
<div class="body">THE CONTENT</div>
<div class="foot">THE LINK TO WIKI PAGE</div>
</div>
So,
a div.wiki-tooltip-balloon div.body {}should work (but is really not necessary)!Many thanks. I understand what you mean, but there seems that something over-rights this attribute which I cannot figure out. Anyway thanks a lot.
Hello. I think I found a small mistake. If we try to insert an anchor link, the main link will be generated correctly, but the link in the tooltip will be generated without adding an anchor. Can you fix this problem ? Sorry for my bad english! Thanks for your work !
Hi.
Some days ago, i posted here message about error during link generation with anchor inside tooltip window. The main link generated correctly , but link inside tooltip window generated without anchor.
Did you see this message?
How can I fix this problem?
Thanks for your work. Sorry for my bad english.
Hi Artyom,
Thank you for xour feedback! Could you please provide an example? I do not understand the problem :/
Hi, its me again :). Its look like the problem was in anather wordpres module making html formatting. I’m turned its off and your module
began to work good. Sorry for worring. Thanks for you work from Russia. Sorry for my bad english 🙂
Nice to hear that the plugins works for you, now! Have fun with it 🙂
Moin, gibt es eine „Do it yourself“ Lösung um den Button im Classic Gutenberg Editor in den Standarteditor einzubauen? (Wikipedia Tooltip) Irgendwie ärgerlich, dass man den shortcode manuell eingeben muss. Ich weis steht ja auf der „geplant“ Liste aber das wäre natürlich ein super feature. Genauso wäre es hilfreich, wenn man eine Glossarliste erstellen könnte und die entsprechenden Wörter automatisch mit dem Wikipedia Tooltip versehen werden
Hey Antaris, vielen Dank für deine Nachfrage! Ich weiß leider (noch) keinen Weg, wie man das Icon und die Funktion mal eben so in die Leiste bekommt. Ich gebe mein Bestes, dass ich das noch im Laufe des Jahres einbaue 😉