WP – Bubble Tooltips (Plugin)

Um die Links (href und title) ein wenig schöner auf der Website darszustellen, genügt ein wenig JavaScript und CSS. Der Tipp von Alessandro Fulciniti hat mir so gut gefallen, dass ich ihn in die Seite eingebunden habe. Um das ganze zu vereinfachen und bei einem Update von WP schneller konfigurieren kann, habe ich diese schöne Art der Tooltips in ein Plugin für WP eingebunden.

If you want the information in english - please have a look on this this page.

Screenshot BubbleTooltip
Screenshot BubbleTooltip

Um die Links (href und title) ein wenig schöner auf der Website darszustellen, genügt ein wenig JavaScript und CSS. Der Tipp von Alessandro Fulciniti hat mir so gut gefallen, dass ich ihn in die Seite eingebunden habe. Um das ganze zu vereinfachen und bei einem Update von WP schneller konfigurieren zu können, habe ich diese schöne Art der Tooltips in ein Plugin für WP eingebunden.

Einige Tipps zum Anpassen stelle ich im folgenden dar.

Anforderungen:

BubbleTooltips läuft mit WP 1.5* und höher, incl. WP 2.0*, WP 2.1* und WP 2.3*

Update: incl. Sweet Title

Screenshot Sweet Title
Screenshot Sweet Title

Seit Version 2.0 kann zwischen zwei verschiedenen Arten von Tooltips gewechselt werden, dazu muss eine kleine Änderung im Plugin erfolgen. Das Script Sweet Title dazu stammt von Dustin Diaz und ich habe es nur ins Plugin integriert, da der Wunsch von einigen lesern kam.

Editiere die Zeile 36:
$fbtt_bubble = '0';
Zahl 0 und es wird SweetTilte verwendet, Zahl 1 und es wird Bubble Tooltip verwendet.

Wenn jemand schon vorher das Plugin verwendet hat, so bitte alle Daten löschen und die Daten komplett neu auf den Server kopieren, da eine neue Struktur entstanden ist. Sollte das CSS angepasst sein, so nicht vergessen dieses wieder einzuspielen, im Ordner CSS.

Installation:

  1. Sichere deine Datenbank und deine Dateien ! Keine Garantie auf zerstörte Daten !
  2. Download des Packages und lokal entpacken.
  3. Upload des Ordners incl. der php-, gif-, css- und js-Datei in deinen Plugin-Ordner (/wp-content/plugins/)
  4. Aktiviere das Plugin im Admin-Bereich von WordPress.
  5. Optional: Gegebenenfalls den Link im CSS-File zum Bild mit dem kompletten Pfad angeben (background: url(http://www.deinblog.de/wp-content/plugins/BubbleTooltips/bt.gif) no-repeat bottom}.

Anpassungen Bubble Tooltip:

Es besteht die Möglichkeit, dass das Bubble-Tooltip nur auf ein bestimmtes ID wirkt, dazu muss die php-Datei angepasst werden.
In Zeile 48 kann das ID gewählt hinterlegt werden. Dort ein ID hinterlegen, dann wirkt das Tooltip-JS auf den entsprechenden Bereich mit dem ID.


enableTooltips(\"content\")

- ohne ID, für die gesamte Seite


enableTooltips()

Die Zeichenanzahl eines Links wird gekürzt, sobald diese >28 Zeichen sind.
In meinem Fall empfand ich das als ungünstig, so dass ich die Zeichenanzahl so angepasst habe, dass meine URL, die ja immer gleich ist, entfernt wird und die folgenden 32 Zeichen dargestellt werden. Diese Anpassung könnt ihr in Zeile 30 des JavaScript-Files vornehmen.


if(l.length>28) l=l.substr(0,25)+"...";

Das folgende Beispiel soll den Usern helfen, die sich nicht des öfteren mit Scripten beschäftigen. Meine URL https://bueltge.de besitzt 22 Zeichen. Wenn es Links >32 Zeichen gibt, dann werden also die ersten 22 Zeichen nicht dargestellt und die folgenden 30 Zeichen werden ausgegeben. Danach folgen ein Leerzeichen und die drei Punkte.


if(l.length>32) l=l.substr(22,30)+" ...";

Anpassungen Sweet Title:

Das Design kann komplett über das Stylesheet angepasst werden. Dafür die Datei /tooltip/css/sweetTitles.css bearbeiten.

Derzeit werden die Tags a, abbr und acronym angesprochen. Sollen es noch andere sein, so die Datei /tooltip/js/sweetTitles.js bearbeiten.
tipElements : ['a','abbr','acronym'],

Download:





Ist die Arbeit nicht 1 Euro wert?
Jede Spende wird dankbar angenommen und ermöglicht das weitere Arbeiten an freier Software.
Möchtest du mehr oder anders spenden, so besuche meine Wunschliste.

Download als ZIP-Datei: (incl. Sweet Title und Bubble Tooltip)downloads.wordpress.org/plugin/bubble-tooltip.zip - 7 KByte

Historie:

  • V1.1 - optimierte Code-Ausgabe
  • V1.2 - Konflikt mit anderen JS_Plugins behoben
  • V2.0 - Sweet Title steht nun als Alternative zur Verfügung
  • V2.1 - CSS-Bug behoben

126 Comments

  1. Dein Plugin ist echt genial. Danke dafür. Aber eine Anmerkung hätte ich noch bezüglich der Sache mit der eigenen Url. Du schneidest ja von jeder Url die ersten x Zeichen ab (je nach dem wie lang die eigene Domain ist), überprüfst du aber auch ob die Url überhaupt die eigene Domain enthält? So würde man ja bei jeder Url die ersten x Zeichen wegschneiden, oder habe ich da was übersehen?

    Ciao Flo

  2. @Flo: Nein, du hast nichts übersehen. Ich schneide die ersten x Zeichen ab und damit auch die, die nicht mit meiner URL beginnen. Aber eigentlich (!) gibt es die nicht. Soll auch nur ein Tipp sein, damit die Darstellung ein wenig schöner ist. IM Urzustand wird ja nichts weggenommen.

    Liebe Grüße Frank

  3. Ah ok, dann bin ich Gott sei dank noch nicht blind. 😉
    Ne wollte das nur wissen, da es ja Links auf externe Seiten nicht so schön ausschaut, hab's aber schon angepasst. Also danke nochmal für das nette Plugin und die schnelle Antwort.

  4. This looks wonderful but I am having an install issue. Its up and working but for some reason the bt.gif doesnt render -- so the text floats on top of the posts. Any idea on what I am doing wrong?

  5. Very keen to get this to work -- but I tried setting up and its working but without the BT.gif -- for some reason word press or the JS isnt seeing the GIF. Any ideas?

  6. Hallo Fabian,
    geht es auf deutsch, dein Blog ist ja deutsch?
    Ich benötige ein wenig mehr Infos, da das Plugin bei dir nicht aktiviert ist.
    Werden denn die beiden Links in den Header von WP eingetragen, also das JS und die CSS-Datei?

    Wird bei einem Link das JS verwendet und fehlt nur das gif? Wenn ja, sollten wir mal im CSS-File den kompletten Pfad zum Bild angeben?

    LG Frank

  7. ich habs gestern abend wieder deaktiviert weils ohne dem gif halt n bissel komisch aussieht...wenn es aktiv ist...geht alles bis auf das das gif angezeigt wird...den kompletten pfad kann ich gleich mal eintragen ins css.

    aha okay...edit gleich mit rein....hab den kompletten pfad des gifs ins css reingeschrieben...nun funktioniert es einwandfrei...

    danke 😀

  8. Hi, I'm trying your plugin but I'm not being able to make it work. I've uploaded into my /wp-content/plugins directory and later activated. Also, after seeing it didn't work I changed css urls in order to make paths absolute. No change.

    thanks.

  9. Hallo,
    ich habe jetzt dieses Plugin auch auf meinem Weblog http://www.drogenabhaengig.ch.
    Ich möchte dazu sagen, das Frank mir das Plugin auf meinem Blog installliert hat.
    Da ich noch ein ziemlicher Anfänger bin, was wordpress anbelangt.
    Ich möchte mich hier bei Dir Frank, ganz herzlich bedanken, dass Du mir so toll geholfen hast.
    Das war sehr nett von Dir.

    Danke und liebe Grüsse.

    Max

  10. @Tapanez:
    Please write in the php-file(Plugin-File): {enableTooltips()} for {enableTooltips(\"content\")}.
    This is the ID for function of tooltip.
    With best regards Frank

  11. Hallo,
    ich habe das Plugin wie beschrieben installiert und in Betrieb genommen ... abere nix passiert???
    Was könnte es sein? "stören" sich andere scripts dort gegenseitig?
    ralph

  12. Ich habe das Plugin jetzt eingebaut und in der CSS den direkten Link auf das GIF gelegt. Es wird aber nur die untere hälfte der Blase angezeigt und der Text steht darunter.

  13. @Lutz Peter: Bitte gib mir mal einen Link, wo ich mir das Problem ansehen kann.
    Scheinbar gibt es einen Konflikt im Stylesheet mit dem Styleshhet deines Blogs.
    LG Frank

  14. Das Plugin hat sich mir einem anderen gebissen was ich verwende. Ich habe es dann vorgezogen es wieder zu deaktivieren. Es gibt wohl Plugins die sich einfach nicht vertragen.

    Danke

  15. Hallo Frank,
    ich habe mir das Plugin auch grad runtergeladen und aktiviert. Es will aber nicht gehen.
    Die Lightbox hab ich auch wieder rausgeschmissen, woran kann das liegen? Vielleicht an meinem Theme? Habe das Andreas04-10.
    Vielleicht kannst ja mal drüberschauen wennst zeit hast, http://www.privatfitness.info.
    Danke für deine Hilfe, Chris

  16. vorab: super seiten! sehr hilfreich und angenehm strukturiert!
    ich richte gerade eine wp-testinstallation für unser büro ein. teste gerade den einsatz von Bubble Tooltips. habe aber auch das problem mit dem "halben gif". habe mal alle möglichen, nicht unbedingt notwendigen, plugins deaktiviert und auch die themes gewechselt. tut sich aber nüscht. die meisten zeigen das gleiche verhalten (Landzilla 1.2 1.0 by Vladimir Simovic reagiert sogar garnicht). hast du eine idee woran es liegen könnte?

    die testinstallation liegt hier: http://www.business-innergy.de/wordpress

  17. Hallo Janji,
    bitte erweitere mal deine bt.css um http://www.businessinnergy.de/wordpress bei der Adresse zum Bild, dann geht es, habe es gerade getestet.
    deine bt.css

    /*CSS for Bubble Tooltips by Alessandro Fulciniti - http://pro.html.it - http://web-graphics.com */
    /* WordPress-Plugin by Frank Bueltge - https://bueltge.de */

    .tooltip{
    width: 200px;
    color: #000;
    font: lighter 11px/1.3 Arial,sans-serif;
    text-decoration: none;
    text-align: center
    }

    .tooltip span.top{
    padding: 30px 8px 0;
    background: url(http://www.businessinnergy.de/wordpress/wp-content/plugins/BubbleTooltips/bt.gif) no-repeat top}

    /* incl. linkcolor */
    .tooltip b.bottom{
    padding:3px 8px 15px;
    color: #556B2F;
    background: url(http://www.businessinnergy.de/wordpress/wp-content/plugins/BubbleTooltips/bt.gif) no-repeat bottom}

    LG Frank

  18. Supertolle Site. Danke schön. Es ist auch für den Anfänger ein echter Genuss hier zu stöbern.
    Ich komme ab sofort regelmäßig.
    Gruß
    Olaf

  19. Hi,

    ich versuche das plugin gerade hier einzusetzen: http://sibiu.zice.ro und es funktioniert auch halbwegs...
    wenn du auf der startseite bist, geht es bei allen links auch die in der sidebar, wenn du einen post öffnest, also auf einer single post page bist, geht fast kein tooltip mehr?

    irgendeine evrnünftige erklärung?

    vielen dank schonmal

  20. sorry, ich schon wieder. das problem ist wenn man einen post öffnet, versagt auf einmal das searchlite plugin, ich denke da kommen sich die javascripte in das gehege, hast du irgendwelche ideen? ich würde gerne beide plugins benutzen.

  21. Sorry, aber mein Plugin benutzt den onload-Tag und damit gibt es Probleme mit anderen JS die diesen ebenso benutzen wollen. Warum es im IE geht kann ich nicht sagen.
    Grüße Frank

  22. Kann man das ganze so einrichten, dass es nur für Links angezeigt wird, die nach außen gehen, also nicht für Links innerhalb meiner Webseite?

  23. Hallo,
    Ich versuche BubbleTooltips nur im Header und in der Sidebar einzusetzen, aber wenn ich in beiden Dateien ein Div mit der gleichen ID aufmache, werden die Tootips immer nur im Header gezeigt (der wird in der index.php auch zuerst aufgerufen). Kann man die Tooltips auch gleichzeitig in 2 Bereichen benutzen?
    Grüße,
    Axel

  24. hallo,

    ich betreibe eine seite aus e107 (ist in etwa wie ilch oder jmola)cms halt wärst du so nett und würdest mir das plugin für diese seite modifiezieren ??

    das wäre supper nett !!!

    mfg

  25. @hups: ich habe keine Kenntnisse in der Plugin-Programmierung für e107, so dass ich da auf die schnelle nicht helfen kann.
    Es ist aber sicher schnell erledigt, wenn du es direkt ins Template integrierst. SInd nur zwei Zeilen im Header. Wenn ja, dann einfach mal Kontakt per Mail und ich versuche dir eine kleine Anleitung zu schreiben.

  26. Hello,
    This is a great plugin. Still... I am having problems with it. The thing is that I have 2 different problems with Sweet Titles.
    1. in Firefox the text (if it very long) goes outside the box of the sweet titles.
    2. in Internet explorer all of the text stays in the box, BUT the box has very different shapes every time and for different links
    You can see what I mean on the right of the page on the art feeds in: http://theasis.aenaon.info/blog/
    It would be nice if I could tell it to show ONLY x amount of characters and no more.
    Thanx in advance

  27. Frank hi,
    Thank you for the quick reply. But I do NOT understand what I must do.
    As you see I have both
    min-width:100px; AND max-width:300px;
    I also have: max-height:100px;
    What new must I write? Is there something else I must do? What do you mean "write major data"?
    Best regards

  28. Frank hi,
    Thank you for the reply. Still I think 500 x 1000 px. is very big area. Is there a way to make it show only the amount of characters that I want? Furthermore I have the lightbox plugin. and in IE it shows the title in 2 ways (http://theasis.aenaon.info/blog/). It would be so nice to come up with some solutions for these. Thank you

  29. Thank you Frank. The new values (max-width:450px; max-height:500px;) work very well on Firefox. Unfortunately NOT in IE. 50% success in only a couple of hours in very good. Brilliant advice. I think you must add some kind of code to fix the bug in the stupid IE.....????? Very bad browser but unfortunately many people use it.
    Thank you. (by the way have a look at the bottom of my page as well at the development wordpress links. A different kind of bug there.)

  30. I am very good in following instructions and very bad on coding. So please tell me where to put this code(it must be in the sweetTitles.css ). In which file and where (for example, write something like this: after line 21 OR after
    -moz-border-radius:5px;}
    Thank you

  31. please write this code in sweetTitle.css

    /* Fix for Windows IE \*/
    * html body div#toolTip {
            width:expression
                    (document.body.clientWidth
                    < 100? "100px": "auto"
                    &&
                    document.body.clientWidth
                    > 450? "450px": "auto")
            height:expression
                    (document.body.clientHeight
                    > 500? "500px": "auto")
    }
    /* Ende von IE5/mac verstecken */
    
  32. There is an error in the bt.css file. The plugin path is incorrect and inconsistent with the tooltips.php. I changed mine to /wp-content/plugins/tooltips/bt.gif and now the background bubble shows up.

    Any chance this plugin will get an admin Options page in the future?

    Thanks!

  33. Hello, great plugin!
    I was wondering if there is a way to make the tooltips also show up in the WordPress dashboard and backend.

    thanks!

  34. Hallo ich bin leider kein Spezialist habe aber schon einiges in WordPress gemacht. Ich habe das Problem Dein Tool zum laufen zu bringen. Ich habe es aktiviert. Doch was muss ich eigentlich noch tun damit es läuft:
    Wie aktiviere ich es wenn ich ein Wort mit Deinem Link beschreiben möcgte?
    Danke für Deine Hilfe
    alles Liebe Peter

  35. Noch eine Frage eigentlich wollte ich das Tool dazu verwenden, dass wenn man über ein Wort drüber fährt eine Erklärung in einem Fenster aufgeht. Für dei Links brauche ich das eigentlich nicht kann ich da Deines verwenden?

Comments are closed.