Tooltipps in Forumbeiträge nur mit "CSS" - Version 1 Aktualisiert 12.12.21
Die hier vorgeschlagenen Tooltipps basieren auf reiner CSS (Cascading Style Sheets) und benötigen keine Aktivierung von JavaScript.
Tooltipps sind Kurz- oder Quickinfos, die angezeigt werden, wenn die Maus über ein dafür vorgesehenes Objekt zeigt.
Mit dem folgenden Beitrag ist es möglich beliebige Textstellen, Bilder oder Links mit formatierbaren Tooltipps, zu versorgen.
Die Tooltipps können in ihrer Farbe und Größe über die Symbolbar neu formatiert werden. Absätze, Leerzeichen, Sonderzeichen, sowie Bilder, können in den Tooltipps mit eingebaut werden.
Die Wörter oder Objekte, die einen Infotext enthalten, werden automatisch mit einer gepunkteten Linie gekennzeichnet.
Das Tooltipp-Fenster öffnet sich unterhalb des Objekts und wandert allerdings in der CSS-Version nicht mit dem Mauszeiger mit!
Einfache CSS-Tooltipps sind für Anzeigen im Randbereich nicht so gut geeignet. Hier werden die Tooltipps mehr oder weniger stark umgebrochen!
<br> <p>Dies ist ein Text mit einem <span class="infobox">Tool- Quicktipp<span><b>Infobox:</b><br> Texte und Opjekte mit Tooltipps</span></span> der bei allen gänigen Browsern funktioniert!</p>
• CSS unter "Admin > Layout > Farben & Einstellungen > CSS" in "Eigener CSS Code" eintragen. • Die Farb- und Pixelwerte können gegebenfalls angepasst werden. Sie bestimmen das Aussehen des Rahmens und die Schrift.
• Der Forencode wird unter "Admin > Layout > Iconbar > Iconbar bearbeiten > Foren-Code" eingetragen. • Es ist darauf zu achten, dass der erweiterte Foren-Code ausblendet ist! • Eintragung erfolgt in "Ersetze:" und "Mit:"!
• Unter "Admin > Layout > Iconbar > Iconbar bearbeiten > HTML" den folgenden Code einsetzen. • Unter "Name" eine Bezeichnung eintragen. • Fertig!
<div onclick="xob_insert('[Tipp]','[Text] Tooltip-Text [/Tipp]')" class="xob_icon_cont"><img title="Zeigt Zusatzinfos beim Überfahren eines Textes an." class="xob_icon" src="https://files.homepagemodules.de/b104774/f46t1197p2706n155_gdASkQsM.gif" width="16" height="16"></div>
Jetzt braucht nur noch der Text oder die Grafik markiert zu werden und mit einem Klick auf die "Tooltipp-Grafik" wird der Forum-Code in den Beitrag eingefügt!
Standardisierte Tooltipps für das Forum - Version 2 Aktualisiert 12.12.21
Es ist einfach in der Symbolbar oder im übrigen Forum mittels "Mouseover" zusätzliche, erklärende Tooltipps anzuzeigen.
Mit title="erklärender Text" kann an jeder beliebigen Stelle ein Text angezeigt werden! Der Vorteil von "title" ist, dass ihn jeder gängige Browser umsetzen kann! Selbst Links können mit Tooltipps versehen werden!
Diese Tooltipps lassen sich allerdings nicht formatieren, werden nur ca. 10sek angezeigt und bestimmte Satz-Zeichen lassen sich nicht verwenden. Aber nicht immer sind diese Optionen notwendig und hier findet dieser Tooltipp seinen Platz!
Zu beachten ist, dass das Attribut "alt" nur vom Internet Explorer als Tooltipp angezeigt wird. Das Attribut "alt" sollte daher den gleichen Text aufweisen wie "title", um in allen Browser die gleiche Info anzugeben. Das Attribut "alt" ist aber nur bei Bildern notwendig. Das Attribut "alt" soll einen alternativen Text für ein Bild enthalten, um den Inhalt des Bildes (Link) auch dann zugänglich zu machen, wenn keine Bilder geladen werden.
Hier einige sinnvolle Beispiele für das DropDown Menü:
Für die Menüeübersicht sieht es so aus: <selecttitle="Menüerklärung" ........>
Für eine Verlinkung zum Forum sieht das so aus: <a title="Hier geht es zum Forum für 'Hilfe, Tricks und Tipps' " href="https://www.hilfe-tricks-tipps.de" target="_blank">Das Forum für "Hilfe, Tricks und Tipps"</a>
Hier ein Beispiel für ein Bild mit Attribut "alt":
Für eine Verlinkung zum Forum über ein Bild sieht das so aus: <a title="Hier geht es zum 'Forum für Hilfe, Tricks und Tipps' " href="https://www.hilfe-tricks-tipps.de" target="_blank"> <img src="https://files.homepagemodules.de/b104774/a_icon14_a094b1e4.gif" border="0" width="84" height="32" alt="Hier geht es zum Forum für 'Hilfe, Tricks und Tipps' "></a>
Professionelle Tooltipps mit "JQuery UI" - Version 3.1 Aktualisiert 12.12.21
Mit der folgenden Version können Tooltipps im Forum über "title" und in Beiträgen mit entsprechenden BB-Code angezeigt werden. Sie sind mit folgenden Merkmalen verbunden:
Einbinden der JavaScript-Bibliothek "JQuery UI"
Kein Eingriff ins Template notwendig!
Präzises platzieren der Tooltipps in allen Browsern
Automatisches anordnen im Bereich von Rändern
Animiertes auf- und zuklappen der Tooltipps
Zeitverzögertes Einschalten der Tooltipps
Tooltipps auch in den Beiträgen formatierbar
Kleine CSS
Wenn "jQuery" noch nicht vorhanden ist, "Auskommentierung" entfernen (In Xobor-Templates bereits vorhanden!)
Position des angezeigten Tooltipps einstellbar!
Installation
• Durch diese HTML-Version können Sie die Tooltipps direkt in Ihre Homepage einbauen oder auch bestimmte Bereiche im Forum mit Tooltipps versehen.
/*Tooltipps in Beiträgen*/ .tooltip {display:none;max-width: 300px;} .tooltip_text {cursor:pointer;border-bottom:1px dotted blue;} .tooltip_text a {text-decoration:none;} </style>
<!-- Wenn jQuery noch nicht vorhanden ist, "Auskommentierung" entfernen (In Xobor-Templates bereits vorhanden!). --> <!-- <script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script> --> <!-- Wenn jQueryUI bereits vorhanden ist, folgende Zeile "auskommentieren" --> <script type="text/javascript" src="https://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script> <script> /* Tooltipps */ $(function(){ $(document).tooltip({ /* Position Tooltipp */ position: { my: "left+8 top+30"}, /* Maus folgen */ track: true, /* Angewendete Elemente (CSS-Selektoren) */ items: '[title], .tooltip_text', /* Ein-/Ausblend-Effekte */ show: { effect: 'slideDown', delay: 300 /* Einschaltverzögerung */ }, hide: { effect: 'blind', delay: 100 /* Haltedauer */ }, /* Inhalt der Tooltips festlegen */ content: function() { var element = $(this);
/* Rückwärtskompatibilität zu bisherigen Tooltips */ if (element.is('.tooltip_text')) { return element.find('.tooltip').html(); }
if (element.is('[title]')) { return element.attr('title'); }
} }); });
</script>
</head> <body> <br> <p>Dies ist ein Text mit einem <span class="tooltip_text">Tooltipp<span class="tooltip"><b>Infobox:</b><br> Texte und Opjekte mit Tooltipps</span></span> , der bei allen gängigen Browsern funktioniert! </p>
Auch die Version mit "<span class="tooltipp_title" title="Version mit 'title' im Forum" ><u>title</u></span>" funktioniert.
• Wenn vorhanden, altes JavaScript für Tooltipps löschen und folgendes JavaScript unter "Admin > Layout > Kopf- & Fußzeile > Kopfzeile" eintragen! • Die Zeitwerte für die Ein- und Ausblendverzögerung können gegebenfalls angepasst werden. Sind aber soweit optimiert!
<!-- Wenn jQuery noch nicht vorhanden ist, "Auskommentierung" entfernen (In Xobor-Templates bereits vorhanden!). --> <!-- <script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script>--> <!-- Wenn jQueryUI bereits vorhanden ist, folgende Zeile "auskommentieren" --> <script type="text/javascript" src="https://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script> <script> /* Tooltipps */
• Forum-Code umsetzen in der Iconbar unter "Foren-Code" und "Ersetze:" und Mit:"! • Der Forencode wird unter "Admin > Layout > Iconbar > Iconbar bearbeiten > Foren-Code " eingetragen. • Es ist darauf zu achten, dass der erweiterte Foren-Code ausblendet ist! • Eintragung erfolgt in "Ersetze:" und "Mit:"!
• Unter "Admin > Layout > Iconbar > Iconbar bearbeiten > HTML" den folgenden Code einsetzen. • Unter "Name" eine Bezeichnung eintragen. • Fertig!
<div onclick="xob_insert('[tipp]','[info2] Tooltip-Text [/tipp]')" class="xob_icon_cont"><img title="Zeigt Zusatzinfos beim Überfahren eines Textes an." class="xob_icon" src="https://img.homepagemodules.de/information.gif" width="16" height="16"></div>
Jetzt braucht nur noch der Text oder die Grafik markiert zu werden und mit einem Klick auf die "Tooltipp-Grafik" wird der Forum-Code in den Beitrag eingefügt!
Professionelle Tooltipps mit "JQuery UI" und einstellbarer Tooltipp-Position - Version 3.3 Aktualisiert 17.08.19
In bestimmten Fällen ist es notwendig die Position des angezeigten Tooltipps genauer zu positionieren. Über die CSS ist dies nicht ohne weiteres möglich. Ein zusätzlicher Eintrag im Skript macht es möglich!
Lösung:
Der folgende Eintrag wird im Skript unter "$(document).tooltip...." eingetragen. Ist bereits oben in Beitrag #3 (Version 3.1)eingefügt.
1 2 3
// Position Tooltipp position: { my: "left+8 top+30"},
Professionelle Tooltipps mit "JQuery UI" - Weitere 13 neue Effekte! - Version 3.4 Aktualisiert 13.12.21
"JQuery UI" bietet außer "fade" und "slide" noch weitere 13 außergewöhnliche Effekte an. In bestimmte Foren sind auch diese Effekte einsetzbar. Sie können wie auch "fade" und "slide" in Beitrag #4 unter "Ein-/ und Ausblend-Effekte" eingebaut werden. Welcher Effekt als Einblend-, welcher als Ausblend-Effekt und welche Zeit genommen wird, ist Geschmackssache und muss einfach ausprobiert werden!
Flinke Tooltipps mit dem hauseigenen jQuery! - Version 4.1 Aktualisiert 13.12.21
Die Tooltipps mit "jQueryUI" haben viele Vorteile, aber auch einen gravierenden Nachteil: Die Ladezeit! Verzichtet man auf die Vielzahl von möglichen Animationen und das Wechseln der Anzeigerichtung in den Randbereichen, dann ist das folgende, superflinke Skript bestens geeignet! Auch in Span-Tags ( <span title='Tooptipp in span-Tags'>…</span> ) werden die Tooltipps richtig wiedergegeben! Die Tooltipps sind frei formatierbar! In HTML-Scipten wird üblicherweise der HTML-Code zum Formatieren verwendet, in Forum-Beiträgen der BB-Code!
Vorteile der neuen flinken Tooltipps:
Die Tooltipps verzögern kaum merklich die Ladezeit der Webseite!
Es braucht kein zusätzliches "jQueryUI" geladen werden!
Es wird das hauseigene "jQuery" genutzt!
Funktioniert in allen Templates!
Die Tooltipps sehen in allen Browsern gleich aus!
Die Tooltipps sind über die "CSS" leicht formatierbar!
Es sind auch große formatierbare Informationsfenster möglich!
Die Tooltipps bewegen sich mit dem Mauszeiger!
Die Tooltipps können auch in Forum-Beiträgen eingerichtet werden und beliebig mit BB-Codes formatiert werden!
Jetzt auch in den Randbereichen gut einsetzbar!
Tooltipps lassen sich auch nach oben hin öffnen!
Installation - Template (v1-4)
Das gesamte Script kann in die Fußzeile oder als neues PI in den "bottom footer" eingetragen werden!
Das Business-Template wird nicht verändert!
In Zeile 2 kann das Aussehen des Tooltipps beliebig angepasst werden!
In Zeile 21+26 kann die Position des Tooltipps zum Mauszeiger eingestellt werden!
Die Bewertungsbutton werden nach dem neuen Update ohne Seiten-Reload aktualisiert, der Tooltipp benötigt zum Aktualisieren die Zeilen 7, 29 bis 31! Wer keine Bewertungsbutton installiert hat, kann die Zeilen 7, 29 bis 31 löschen!
Zeile 22 bis 27 korrigieren bei langen Tooltipps den Abstand zum rechten Rand!
Zeile 3, 11+18 ermöglichen "cursor:pointer" und "text-decoration:underline" für Tooltipps in span-Tag
Möchte man die flinken Tooltipps in Forum-Beiträgen einsetzen, müssen neue Foren-Codes erstellt werden!
Zu beachten: Die Tooltipps sind frei formatierbar, nur ist darauf zu achten, dass innerhalb der Tooltipp-Beschreibung keine Auslassungszeichen ( '...' ) verwendet werden! Hier können die normalen Anführungszeichen ( "..." ) genommen werden!
• Neue Iconbar aufrufen • "Neue Icons hinzufügen" anklicken • Reiter Forencode anklicken • Erweiterte Foren-Code ausblenden! • Werte eintragen und speichern • Forencode in "nicht sichtbar" verschieben
Für alle neuen Foren-Codes unter "Weitere Einstellungen":
Verwendet man sehr große, mehrreihige Tooltipp-Informationen, können sie im unteren Randbereich verschwinden und nicht lesbar sein! Eine einfache Lösung währe die Tooltipps nach oben hin zu öffnen!
• Folgende Zeile 20 im HTML-Script austauschen! • Der Abstand kann noch in Zeile 4 geändert und angepasst werden (hier 35px)!
• Hinweis zum Nachbau: Forencodes für [bg10], [h2]…[/h2] müssen installiert sein!
1 2 3 4 5 6 7 8 9
Hinweis mit viel [tooltipp_text] [h2][center][style=color:#222222][u]Vorteile der neuen flinken Tooltipps![/u][/style][/center][/h2][br][bg10][style=padding:30px; font-size:14px;][ul][li]Die Tooltipps verzögern kaum merklich die Ladezeit der Webseite![/li] [li]Es braucht kein zusätzliches "[rot]jQueryUI[/rot]" geladen werden![/li] [li]Es wird das hauseigene "[rot]jQuery[/rot]" genutzt![/li] [li]Die Tooltipps sehen in allen Browsern gleich aus![/li] [li]Die Tooltipps sind per "[blau]CSS[/blau]" formatierbar! [/li] [li]Es sind auch große formatierbare Informationsfenster möglich[/li] [li]Die Tooltipps bewegen sich mit dem Mauszeiger! [/li] [li]Die Tooltipps können auch in Forum-Beiträgen eingerichtet werden! [/li][/ul][/style][/end][br][/tooltipp_text]formatierten Text[/tooltipp_ende]!
• Forencodes für [bg10], [h2]…[/h2] werden direkt in HTML umgesetzt! • Der eigentliche Tooltipp steckt in Zeile 2-14
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Hinweis mit viel <span title=' <h2><center><span style="color:#222222"><u>Vorteile der neuen flinken Tooltipps!</u></span></center></h2> <div style="font-size:14px;background-color:#00115f;padding:10px 20px;border:2px solid #00007f;color:#FFFFFF;">
<ul><li>Die Tooltipps verzögern kaum merklich die Ladezeit der Webseite!</li> <li>Es braucht kein zusätzliches "<span style="color:#ee8000">jQueryUI</span>" geladen werden!</li> <li>Es wird das hauseigene "<span style="color:#ee8000">jQuery</span>" genutzt!</li> <li>Die Tooltipps sehen in allen Browsern gleich aus!</li> <li>Die Tooltipps sind per "<span style="color:#1874c9">CSS</span>" formatierbar! </li> <li>Es sind auch große formatierbare Informationsfenster möglich</li> <li>Die Tooltipps bewegen sich mit dem Mauszeiger! </li> <li>Die Tooltipps können auch in Forum-Beiträgen eingerichtet werden! </li></ul> </div> <br> '>formatierten Text</span>!
Tooltipp mit Bilddarstellung: [tooltipp_text][img=300px]https://files.homepagemodules.de/b104774/f46t1197p2706n121_bdLBIYKE.jpg[/img][/tooltipp_text][img=100px]https://files.homepagemodules.de/b104774/f46t1197p2706n121_bdLBIYKE.jpg[/img][/tooltipp_ende]
[tooltipp_text][unterschrift][img=300px]https://files.homepagemodules.de/b104774/f46t1197p2706n121_bdLBIYKE.jpg[/img][beschreibung]Tooltipp zur Vergrößerung eines Bildes, [br]mit Bildbeschreibung![/beschreibung][/unterschrift][/tooltipp_text][img=100px]https://files.homepagemodules.de/b104774/f46t1197p2706n121_bdLBIYKE.jpg[/img][/tooltipp_ende]
Aktualisiert: Super flinke Tooltipps mit Randbereichsfunktion! - Version 4.2
Vorher Hinterher Alle einfachen Tooltipps haben Schwierigkeiten mit den Randbereichen, wie auf dem Bild 1 zu sehen ist! Das neue Skript wurde nur um wenige Zeilen erweitert und bleibt somit weiterhin recht klein! Es wechselt nicht die Anzeigedarstellung von rechts nach links, wie mit den großen jQueryUI, sondern verhindert ein zusammendrücken und umbrechen der Tooltipps (siehe Bild 2)! Bei großer Tooltipp-Darstellung besonders gut! Zusätzlich wurde kleine Probleme, wie das Aufblitzen des alten Tooltipps beim Seiten-Reload und leere Tooltipps beim zu schnellen Überfahren behoben! Tooltipps lassen sich jetzt auch nach oben hin öffnen!
Super flinke Tooltipps - Erweiterung Layout! - Version 4.3 Aktualisiert 13.12.21
Möchte man die Tooltipps aussagekräftiger machen, kann man eine zusätzliche Grafik hinzufügen! Das kann wie folgt aussehen (Bitte mit der Maus über den Tooltipp fahren)!
Ein Info-Tooltipp:
Tooltipp für Informationsmeldungen über Neuerungen oder aktuelle Themen!
Ein Tooltipp für Hilfe:
Tooltipp für Hilfe und Unterstützung bei Anleitungen oder Funktionsbeschreibungen!
Ein Tooltipp für Fehler-Meldungen:
Tooltipp für Fehlermeldungen oder kritischen Zuständen!
Ein Tooltipp für Warnungen:
Tooltipp für Warnmeldungen und Warnhinweisen!
Installation - Business Template V4
• Eintrag in "Eigener CSS Code"! • In Zeile 2 wird der Tooltipp zur Erkennung unterstrichen und kann auch farblich hinterlegt werden! • In Zeile 3 wird die Position und Größe der Grafik für "Info", "Hilfe" und "Fehler" bestimmt! • In Zeile 4 wird die Position und Größe nur für die Grafik "Warnung" bestimmt!
1 2 3 4
/** Tooltipps mit zusätzlicher Grafik **/ .tooltip_text {cursor:pointer !important; text-decoration:underline;color:#1874c9;} .title_img {position: absolute;width: 35px;left: -20px;top:-8px;} .title_img_w {position: absolute;width: 40px;left: -25px;top:-12px;}
Tooltipps gezielt ausblenden! - Alle Versionen Aktualisiert 13.12.21
So schön und informativ Tooltipps sein können, können sie auch stören oder wichtige Informationen überdecken! Will man gezielt Tooltipps ausblenden, ohne das jeweilige Template zu verändern, geht man wie folgt vor! Es ist möglich in allen Bereichen des Forums gezielt Tooltipps, die mit "title" erstellt worden sind, auszublenden!
Installation - Business Template V4
Beispiel 1: Möchte man die Tooltipps in der "Bildergalerie" ausblenden, funktioniert das mit dem folgende Skript (Für alle Templates)! Sollen in anderen Bereichen Tooltipps ausgeblendet werden, benötigt man andere "Classes" oder "ID's"!
• "Classes" oder "ID's" müssen über "rechte Maustaste" und "Element untersuchen" ausfindig gemacht werden! • Dazu die Maus über das auszublendende Objekt halten! Hier ist es das große Bild in der Bildergalerie! • Über "rechte Maustaste" und "Element untersuchen" eine "Class" oder "ID" auslesen! • Folgendes Skript mit der gefundenen "Class" oder "ID" in die "Fußzeile" oder besser als Plugin in den "bottom_header" kopieren! • Für die Bildergalerie ist es ".gallpic" fürs "Business-Template" und für die anderen Templates ist es ".fn-container"! • Das Skript funktioniert in allen Templates! • Fertig!
Beispiel 2: Möchte man die Tooltipps im Kalender für "Geburtstage aus/einblenden" und "Ereignisse aus/einblenden" ausblenden, funktioniert das wie folgt (Für alle Templates)!
• Da die besagten Tooltipps noch Fehler aufweisen, lohnt es sich sie zu überschreiben oder auszublenden! • Um die Tooltipps auszublenden, folgendes Skript in die "Fußzeile" oder besser als Plugin in den "calendar_footer" kopieren! • Das Skript funktioniert in allen Templates! • Fertig!
1 2 3
<script> $('.tbhi table span a, .calendar_body table span a, .c_r_content3 table span a').removeAttr('title'); </script>