Tooltip-Plugin für WP dringend gesucht

thobie

thobie

Mitglied
Thread Starter
Dabei seit
23.04.2006
Beiträge
636
Punkte Reaktionen
111
Moin, Moin, Kollegen,

bevor ich jetzt weiterhin teste, meine Frage an Euch: Kann mir jemand ein gut funktionierendes, kostenloses, gut konfigurierbares Plugin für Tooltips empfehlen?

Ich habe bisher Tooltip CK verwendet, bis ich jetzt feststellte, dass es einen Teil des Codes an den Kopf einer Seite setzt.

Alle anderen getesteten Plugins waren entweder defekt, zu alt oder funktionierten nicht.

Sowohl der Text als auch der Text im Popup-Fenster sollen konfigurierbar sein und letzterer muss zwei Links enthalten.

Grüße aus Hamburg

Thobie
 
Difool

Difool

Frontend Admin
Dabei seit
18.03.2004
Beiträge
17.126
Punkte Reaktionen
12.602
Ich habe bisher Tooltip CK verwendet, bis ich jetzt feststellte, dass es einen Teil des Codes an den Kopf einer Seite setzt.
Was meinst du damit?
Das Plugin verwendet jQuery und css – irgendwo müssen diese Daten ja geladen werden.
Und wenn da "konfiguriert" werden kann, sind es einige Scripte, die geladen werden müssen.

Alternativ kann man bsw. mit einer functions-Anweisung solche Scripts am Ende der Site laden lassen.
Gäbe auch Plugins dafür: "javascript to footer" und ähnliche Namen.

Beispiel für ein Snippet für die eigene functions.php:
(… mit der nummerischen Zahl am Ende der "add_action" kann man die Lade-Reihenfolge der Scripte beeinflussen.)
PHP:
<?php

function add_this_script_footer(){ ?>

[YOUR JS CODE HERE]

<?php }

add_action('wp_footer', 'add_this_script_footer', 20); ?>

Wenn es die Funktion nicht beeinträchtig, was bei jQuery durchaus mal vorkommen kann, wenn die Reihenfolge des Ladens der Scripte verändert wird.
Auch wäre es möglich nur auf Seiten, wo die Tooltips vorkommen, die dafür benötigten Scripte erst auch nur dann laden zu lassen usw.

Das ist ja die Krux bei Plugins – sind bringen oftmals viel Zeug mit, was man nicht benötigt oder stiefmütterlich umgesetzt wurde usw.

Für manuell selbstangelegte simple tooltips benötigst du lediglich etwas css und das Markup dazu:

CSS:
.tooltip-box {
  position: relative;
  display: inline-block;
}
.tooltip-box .tooltip-text {
  visibility: hidden;
  width: 100px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 6px 0;
  position: absolute;
  z-index: 1;
}
.tooltip-box:hover .tooltip-text {
  visibility: visible;
}

Markup für den Text-Editor:
HTML:
<div class="tooltip-text">Parent text
  <span class="tooltiptext">Tooltip text here!</span>
</div>
 
M

MacMac512

Aktives Mitglied
Dabei seit
12.09.2011
Beiträge
5.649
Punkte Reaktionen
4.108
Nichts aktiv zum Thema. Aber bedenke bei den Dutzenden PlugIns, dass jedes einzelne mal rum zicken kann, oder sich mit anderen ins Gehege kommen kann.

Okay, doch noch zum Thema: Tooltips an sich brauchen keine Plugins. Da reicht ein bisschen HTML und CSS.
 
thobie

thobie

Mitglied
Thread Starter
Dabei seit
23.04.2006
Beiträge
636
Punkte Reaktionen
111
Moin, Moin, Difool,

es wird ja in öffentlichen Foren ungern gesehen, dass ich um eine Hilfestellung bitte, wenn es sich um eine Website eines Kunden von mir handelt. Ich verstehe das. Aber ich poste doch einmal einen Link zu einer Seite der Site, auf der Code am Kopf der Seite gezeigt wird.

https://www.asp-hamburg.de/privat/rechtsschutz/

Das Tooltip liegt über dem Text „(weitere Infos)“.

Ich werde einmal Dein CSS bzw. HTML testen, ob dies gut funktioniert.
 
thobie

thobie

Mitglied
Thread Starter
Dabei seit
23.04.2006
Beiträge
636
Punkte Reaktionen
111
Difool,

ich habe eben unverändert das CSS im zusätzlichen CSS und den HTML-Code auf der Seite eingegeben.

Es erscheint kein Tooltip, wie bei vielen getesteten Plugins, sondern das hier:

Parent text
Tooltip text here!
 
thobie

thobie

Mitglied
Thread Starter
Dabei seit
23.04.2006
Beiträge
636
Punkte Reaktionen
111
Da war ein Fehler im CSS-Code. Ich habe ihn behoben. Und den Code noch ein wenig modifiziert, was Breite, Schrift- und Hintergrundfarbe anbelangt. Der Code funktioniert nun korrekt, den Code des Plugins habe ich aus der Seite genommen.

Jetzt gibt es leider nur ein kleines Problem: Der Code besteht aus div-Containern. Der Text ist nun unter der Headline positioniert, er soll allerdings eigentlich rechts daneben stehen. Wie passe ich das an?
 
rodriguez

rodriguez

Mitglied
Dabei seit
07.12.2004
Beiträge
535
Punkte Reaktionen
163
Dann positioniere Headline und parent text mit float:left
Und wegen SEO und Ranking sollte eine Seite immer hierarchisch aufgebaut sein: H1,H2,H3, H4 ...
 
M

MacMac512

Aktives Mitglied
Dabei seit
12.09.2011
Beiträge
5.649
Punkte Reaktionen
4.108
Mal ne blöde Frage. Ich bastel ja nur Webseiten für den privaten und schulischen Bereich, also für mich und meine Kollegen. Aber testest du die Snippets etc hier direkt auf der Kunden Webseite, für deren Verwaltung du ja bezahlt wirst?

Selbst bei meinen kleinen Seiten nutze ich einen Testserver, welcher alles wesentliche enthält und dann Änderungen erst von da auf die “öffentliche” Version gespielt werden. Da kannst du doch für genau sowas eine unverbindliche Und vor allem anonyme Webseite hier veröffentlichen ohne deinen Kunden hier (vermutlich) ungewollte Erwähnungen zu schenken.
 
M

MacMac512

Aktives Mitglied
Dabei seit
12.09.2011
Beiträge
5.649
Punkte Reaktionen
4.108
P.S.: Fehlt der Webseite nicht auch ein Impressum? - wichtiger als Tooltips!
Gefunden, ist unter Home versteckt.

Auf dem iPhone ist das Logo oben über der Navbar mMn eher störend. Aber das ist Geschmacksache.
 
Zuletzt bearbeitet:
thobie

thobie

Mitglied
Thread Starter
Dabei seit
23.04.2006
Beiträge
636
Punkte Reaktionen
111
Mal ne blöde Frage. Ich bastel ja nur Webseiten für den privaten und schulischen Bereich, also für mich und meine Kollegen. Aber testest du die Snippets etc hier direkt auf der Kunden Webseite, für deren Verwaltung du ja bezahlt wirst?

Selbst bei meinen kleinen Seiten nutze ich einen Testserver, welcher alles wesentliche enthält und dann Änderungen erst von da auf die “öffentliche” Version gespielt werden. Da kannst du doch für genau sowas eine unverbindliche Und vor allem anonyme Webseite hier veröffentlichen ohne deinen Kunden hier (vermutlich) ungewollte Erwähnungen zu schenken.
Ich gebe Dir recht. Ich hatte zu diesem Zweck auch Inhalt des Webspaces der Site und die Datenbank auf meinen Mac geladen, um für dieses Testen eine lokale Entwicklungseinrichtung anzulegen. Ich habe dies schon einmal erfolgreich mit meinem Foodblog gemacht. Leider zieht sich die Einrichtung der lokalen Site mit Fehlermeldungen dahin und der Support dazu ist nicht gerade hilfreich. Und der Kunde braucht die Änderungen eben schnell. :)
 
Difool

Difool

Frontend Admin
Dabei seit
18.03.2004
Beiträge
17.126
Punkte Reaktionen
12.602
Alternativer Vorschlag – damit umgehst du auch die 450px Breite im Responsive … die da sonst rechts so rauskleckern.
Und die "transition" auf den Links besser im tootltip-text rausnehmen.

CSS:
.page-id-197 .entry-content h4 { float: left; width: 6.5em; padding-bottom: 2px; bottom: 10px; position: relative; }
.tooltip-box { display: flex; }
.tooltip-box .tooltip-text { visibility: hidden; width: auto; background-color: #fff; color: #000000; text-align: center; position: absolute; z-index: 1; }
.tooltip-box .tooltip-text a { transition: none; }
.tooltip-box:hover .tooltip-text { visibility: visible; }
Das css sollte funktionieren – allerdings habe ich das im Developer-Tool zusammengeschrieben.
Müsstest du mal testen.
Mit der .page-id-197 spricht man nur die h4 auf dieser expliziten Seite an.

Die Screens zeigen den "active hover" – also den tooltip-text auf visible.

asp.png

asp-mobil.png
 
Zuletzt bearbeitet:
thobie

thobie

Mitglied
Thread Starter
Dabei seit
23.04.2006
Beiträge
636
Punkte Reaktionen
111
Moin, Moin, Difool, danke für Deine erneute Hilfe. Der erste CSS-Code hat, modifiziert, funktioniert. Das Problem mit der responsiven Darstellung auf einem Smartphone verstehe ich. Der zweite Code funktioniert aber nicht. Tausche ich den ersten gegen den zweiten aus, ist das Tooltip verschwunden.
 
Difool

Difool

Frontend Admin
Dabei seit
18.03.2004
Beiträge
17.126
Punkte Reaktionen
12.602
Das fehlte noch: .tooltip-box:hover .tooltip-text { visibility: visible; }

Habe ich oben ergänzt.
 
thobie

thobie

Mitglied
Thread Starter
Dabei seit
23.04.2006
Beiträge
636
Punkte Reaktionen
111
Mit der .page-id-197 spricht man nur die h4 auf dieser expliziten Seite an.
Das Tooltip ist mittlerweile in sieben Seiten eingebunden. Ich kann somit das CSS um diese sechs Seiten mit den zugehörigen IDs ergänzen und dann sitzt die Tooltipbox auf allen Seiten jeweils rechts von der Headline?
 
Difool

Difool

Frontend Admin
Dabei seit
18.03.2004
Beiträge
17.126
Punkte Reaktionen
12.602
Das Tooltip ist mittlerweile in sieben Seiten eingebunden. Ich kann somit das CSS um diese sechs Seiten mit den zugehörigen IDs ergänzen und dann sitzt die Tooltipbox auf allen Seiten jeweils rechts von der Headline?
Jede page hat ihre ID, richtig.
Und sofern die Headline eine h4 im .entry-content ist, ja.
Allerdings greift das css auf Headlines als h4 ausgezeichnet; das bedenken, falls du weitere h4 auf einer page setzen solltest.
Ansonsten sollte es so sein, ja.
 
thobie

thobie

Mitglied
Thread Starter
Dabei seit
23.04.2006
Beiträge
636
Punkte Reaktionen
111
Moin, Moin, Difool,

ich hatte zuerst den Zusetztext "(weitere Infos)" mit dem Tooltipp unter der Headline belassen. Jetzt will ich ihn doch rechts daneben platzieren.

Ich habe Deinen neuen Code auf der Seite mit der Page ID 197 (Rechtsschutz) getestet:

CSS:
.page-id-197 .entry-content h4 { float: left; width: 6.5em; padding-bottom: 2px; bottom: 10px; position: relative; }
.tooltip-box { display: flex; }
.tooltip-box .tooltip-text { visibility: hidden; width: auto; background-color: #fff; color: #000000; text-align: center; position: absolute; z-index: 1; }
.tooltip-box .tooltip-text a { transition: none; }
.tooltip-box:hover .tooltip-text { visibility: visible; }

https://www.asp-hamburg.de/privat/rechtsschutz/

Problem:
a) Der Text "(weitere Infos)" erscheint nicht rechts neben der Headline, da er ja in einem eigenen Container steckt.
b) Zudem hat man keinen Popup-Effekt mehr, sondern der Text "(weitere Infos)" wird einfach durch den Mouseover-Text ersetzt.

Ich habe Deinen Code einmal eingebunden gelassen, und den Effekt siehst Du auf der Rechtsschutz-Seite.

Ich verwende auf den Seiten die h4 nur für die Seiten-Headline, andere Headlines auf den Seiten sind davon also nicht betroffen.

Nachtrag: Ist der HTML-Text für den Tooltip auf den Seiten nicht auch ohne div-Container möglich? Dann hätte ich diese Probleme damit nicht.
 
thobie

thobie

Mitglied
Thread Starter
Dabei seit
23.04.2006
Beiträge
636
Punkte Reaktionen
111
Moin, Moin,

ich habe jetzt nach längerer Suche ein (zwar leicht veraltetes) Tooltip-Plugin gefunden, das gut funktioniert und nicht irgend welchen Quellcode plötzlich an den Kopf einer Seite im Frontend setzt. Problematisch war bisher bei fast allen Plugins, dass der Popup-Text auch zwei Verlinkungen enthält, die mit dem zugehörigen HTML-Code meistens nicht in den Shortcode des Plugins eingefügt werden konnte, da dies eben nur reiner Text sein sollte.

Bei Deinem Vorschlag hängt das Problem daran, dass das Tooltip in einem div-Container hängt.

Und der Tooltip-Text soll jetzt zwingend rechts neben der Überschrift platziert sein.

Ich habe daher auf der Seite Rechtsschutz Deinen Vorschlag erst einmal herausgenommen und den Shortcode des Plugins platziert.
 
M

MacMac512

Aktives Mitglied
Dabei seit
12.09.2011
Beiträge
5.649
Punkte Reaktionen
4.108
Selbst bei meinen kleinen Seiten nutze ich einen Testserver, welcher alles wesentliche enthält und dann Änderungen erst von da auf die “öffentliche” Version gespielt werden. Da kannst du doch für genau sowas eine unverbindliche Und vor allem anonyme Webseite hier veröffentlichen ohne deinen Kunden hier (vermutlich) ungewollte Erwähnungen zu schenken.
Das hier würde ich aber auch nochmal bedenken. Da du ja schon einige Zeit daran bastelst wäre das eine Überlegung, statt einzelne Bereiche der Kundenwebseite für CSS/HTML Basteleien zu missbrauchen, da dort vermeintlich weniger Besucher aktiv sind.
 

Ähnliche Themen

Oben