Forum - Formatierbare Tooltipps oder Quickinfos

Um alle Funktionen nutzen zu können, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt für Hilfe, Tricks & Tipps » XOBOR-Foren und Homepages »

Das neue Template Xobor (v6). » Formatierbare Tooltipps oder Quickinfos - Version 1-5

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ankündigungen & Termine, wichtige News. Stellen Sie Ihr eigene Webseite vor. Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps. MS Windows 11, 10, 8 und 7 - Fragen & Antworten. Linux, Ubuntu und andere Betriebssysteme. Ärger mit dem PC, Laptop oder Tablet? Ärger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe? Ärger mit dem PC, Laptop oder Tablet - Fragen & Antworten? Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten. XOBOR-Foren und Homepages Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! Das neue Template Xobor (v6). Energieerzeugung im neuen Zeitalter - Revolutionär! Videos und Webseiten zur Freien Energie. Wasserstoff - Energieträger der Zukunft. Elektronik & Elektrotechnik Elektronik & Elektrotechnik - Fragen und Antworten Elektronik & Elektrotechnik - Praxis - Highlights Die besten Links! Empfehlenswerte und interessante Links! Link - Suche. Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps für Smartphones und iPhones. Lob, Kritik & Verbesserungsvorschläge. Spiel & Spaß, Witz & gute Laune! Spiritualität, Seele, New Age, Yoga, Gesundheit. Alles, was noch so übrig bleibt. Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel.

#1 | Formatierbare Tooltipps oder Quickinfos - Version 1-5 datum

21.01.2008 18:45 (zuletzt bearbeitet: 02.05.2024 07:44)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3865
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1707

Tooltipps in Forumbeiträge nur mit "CSS" - Version 1
Aktualisiert 01.05.24

CSS-Tooltip in Beiträgen - Mit Grafik

Tooltipp nur mit CSS

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, ist animiert und hat eine Ansprechverzögerung!

Optional

Optional kann noch ein zusätzlicher Pfeil zum Tooltip angebracht werden!

Nachteile

Die hier vorgeschlagenen Tooltipps basieren auf reiner CSS (Cascading Style Sheets) und benötigen keine Aktivierung von JavaScript.
Einfache CSS-Tooltipps können völlig ausreichend sein, sind für Anzeigen im Randbereich allerdings nicht so gut geeignet.
Die CSS-Tooltipps wandern nicht mit dem Mauszeiger mit!

So sieht der HTML-Code für die Tooltipps aus:

1
 
<div class="infobox">Auslöse-Text<span class="tooltiptext">Tooltipp-Text</span></div>

So sieht der Forum-Code für die Tooltipps in den Beiträgen aus:

Der Forum-Code wird mit einem Klick auf dieses Symbol

in den Beitrag eingefügt!

1
 
[Tipp]Auslöse-Text[Text]Tooltipp-Text[/Tipp]

Installation für alle Templates

HTML-Version im Überblick

CSS eintragen

Neuer Foren-Code

Iconbar

Infos über Tooltipps: Tooltipp-Infos auf Wikipedia

Bis dann und viel Erfolg

Wolfgang

Antworten

Moderations-Kommentar:

Beitrag komplett überarbeitet, neuen verbesserten CSS-Code eingesetzt!

#2 | Standardisierte Tooltipps mit "title" - Version 2 datum

23.01.2008 02:35 (zuletzt bearbeitet: 08.05.2024 16:39)

Standardisierte Tooltipps mit "title" - Version 2
Aktualisiert 08.05.24

tooltipps mit "title"Mit title="erklärender Text" und "Mouseover" 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 ohne weiteres formatieren, benötigen dann ein gesondertes Plugin, wie das aus Beitrag #3 + Beitrag #4 !

Hier einige sinnvolle Beispiele

Für ein DropDown Menü<select title="Menüerklärung" ........>

Tooltipp für ein DD-Untermenü<optgroup title="Erklärung für das Untermenü" ......">

Tooltipp für die einzelnen Optionen im DD-Untermenü<option title="3D-Button" .......</option>

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>

Tooltipp für einen wichtigen Div-Container<div title="Hier gibt es wichtige Informationen zum Thema X">Das wichtigste aus dem Forum!</div>

Bis dann

Wolfgang

Antworten

Moderations-Kommentar:

Beitrag aktualisiert!

#3 | Tooltipps mit dem hauseigenen minimierten jQuery! - Version 3 datum

27.09.2013 01:20 (zuletzt bearbeitet: 13.05.2024 07:45)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3865
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1707

Tooltipps mit dem hauseigenen minimierten jQuery! - Version 3
Aktualisiert 13.05.24

Die Tooltipps mit "" haben viele Vorteile, aber auch einen Nachteil: Die Ladezeit!
Verzichtet man auf die Vielzahl von möglichen Animationen und das Wechseln der Anzeigerichtung in den Randbereichen, dann ist das folgende Skript eine gute Wahl!
Die Tooltipps sind frei formatierbar! In HTML-Scipten wird der HTML-Code zum Formatieren verwendet, in Forum-Beiträgen der BB-Code!

Was bietet das minimierte jQuery für die 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)

HTML-Script zur Übersicht

Neue Foren-Codes

Icon in der Iconbar

Tooltipp nach oben öffnen

Tooltipps in Aktion:

Zum Testen den Mauszeiger über die unterstrichenen Textstellen, oder übers Bild führen!

Tooltipp ohne und mit formatierten Text:

Einfache Text-Darstellung im Beitrag!
Hinweis mit formatierten Text!

Hinweis zum Nachbau: Foren-Codes für [bg10] muss installiert werden!

1
2
3
4
5
6
7
8
9
 
Hinweis mit [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]!
 

Schließen

Forencodes für [bg10] 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
 
Hinweis mit <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>!
 
 

Schließen

Tooltipp zur Vergrößerung eines Bildes:

Neuer Foren-Code erforderlich: Forum-Bilder mit einstellbarer Größe und Tooltipps austatten

1
 
 Tooltipp mit Bilddarstellung: [tooltipp_text][img=auto=300px]https://files.homepagemodules.de/b104774/f46t1197p2706n121_bdLBIYKE.jpg[/img][/tooltipp_text][img=auto=100px]https://files.homepagemodules.de/b104774/f46t1197p2706n121_bdLBIYKE.jpg[/img][/tooltipp_ende]

Schließen

1
2
3
 
<span title='<img src="https://files.homepagemodules.de/b104774/f46t1197p2706n121_bdLBIYKE.jpg" width="300px">'>
<img src="https://files.homepagemodules.de/b104774/f46t1197p2706n121_bdLBIYKE.jpg" width="100px" style="border:1px solid #777777; border-radius:5px;">
</span>
 

Schließen

Tooltipp zur Vergrößerung eines Bildes, mit Bildbeschreibung:

Installation Bildbeschreibung notwendig: Forum-Bilder und Textfelder mit Beschreibungen

1
 
[tooltipp_text][Img_text=Tooltipp zur Vergrößerung eines [br]Bildes, mit Bildbeschreibung!][img=auto=450px]https://files.homepagemodules.de/b104774/f46t1197p2706n121_bdLBIYKE.jpg[/img][/Img_text][/tooltipp_text][img=auto=100px]https://files.homepagemodules.de/b104774/f46t1197p2706n121_bdLBIYKE.jpg[/img][/tooltipp_ende]

Schließen

Foren-Codes für Forum-Bilder und Textfelder mit Beschreibungen werden direkt in HTML umgesetzt!
Der eigentliche Tooltipp steckt in Zeile 2-9

1
2
3
4
5
6
7
8
9
10
11
12
 
<span title='
<dl>
<img src="https://files.homepagemodules.de/b104774/f46t1197p2706n121_bdLBIYKE.jpg" width="300px">
<p><dd>
Tooltipp zur Vergrößerung eines 
<br>
Bildes, mit Bildbeschreibung!
</dd></p>
</dl>
'>
<img src="https://files.homepagemodules.de/b104774/f46t1197p2706n121_bdLBIYKE.jpg" width="100px" style="border:1px solid #777777;border-radius:5px;">
</span>
 

Schließen

Bis dann und viel Spaß
Wolfgang

Tausendstern findet das Top!

Antworten

Moderations-Kommentar:

Beitrag überarbeitet, Anleitung ausführlicher geschrieben!

#4 | Professionelle Tooltipps mit "jQuery UI" formatierbar - Version 4 datum

22.08.2015 20:17 (zuletzt bearbeitet: 07.10.2024 00:10)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3865
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1707

Professionelle Tooltipps mit "jQuery UI" formatierbar - Version 4

Aktualisiert 15.11.2025

Was bietet das folgende Skript?Mit der folgenden Version 4 können Tooltipps im Forum über "title", jetzt auch über "data-title" und damit auch im neuen Xobor (v6) angezeigt werden.
In den Beiträgen können mit entsprechenden BB-Codes, wie oben zu sehen ist, großspurig die Tooltipps formatiert werden!
Sie sind mit den folgenden Merkmalen verbunden!

Präzises platzieren der Tooltipps in allen Browsern.
Automatisches anordnen im Bereich von Rändern.
Position des angezeigten Tooltipps einstellbar!
Tooltipps sind in den Beiträgen mit BB-Codes formatierbar!

Neu! Tooltipps mobil abschaltbar!
Neu! Verhindert doppelte oder stehengebliebene Tooltipps!
Neu! Kann auch im neuen Xobor (v6) aktiviert werden!

Beispiel-Tooltipp mit umfangreicher BB- Formatierung - Bitte testen!

Bitte die Mouse über den Button bewegen!

Das Skript mit den BB-Foren-Codes:

Wichtige InfoHat man sich für dieses Top-Skript Version 4 entschieden, kann es mit dem Skript Version 3 aus Beitrag #3 einfach ersetzt werden, ohne dass die bereits geschriebenen Beiträge mit Tooltipps nicht mehr funktionieren!

Installation für alle Templates, auch Xobor (v6)

HTML-Version im Überblick

JavaScript eintragen

CSS eintragen

Neue Forum-Codes anlegen

Für die Iconbar

Auch hier nachzulesen: Webseite von JQuery User Interface
Infos über Tooltipps: Tooltipp-Infos auf Wikipedia

Bis dann, viel Erfolg und besten Dank für Florian's Unterstützung

Wolfgang

DJ-Frechdax findet das Top!

Antworten

Moderations-Kommentar:

Beitrag komplett überarbeitet, Einbauanleitung genauer beschrieben, funktioniert in allen Bereichen mit "title + data-title", auch im neuen Xobor (v6)!
Mit Fehlerkorrektur.

#5 | Tooltipps - Erweiterung Layout! datum

02.09.2019 08:48 (zuletzt bearbeitet: 13.05.2024 07:37)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3865
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1707

Tooltipps - Erweiterung Layout!
Aktualisiert 13.05.24

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:

für Informationsmeldungen über Neuerungen oder aktuelle Themen!

Ein Tooltipp für Hilfe:

für Hilfe und Unterstützung bei Anleitungen oder Funktionsbeschreibungen!

Ein Tooltipp für Fehler-Meldungen:

für Fehlermeldungen oder kritischen Zuständen!

Ein Tooltipp für Warnungen:

für Warnmeldungen und Warnhinweisen!

Installation - Business Template V4

Zusätzlicher CSS-Eintrag:

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;}
 

Schließen

Neue Foren-Codes mit zusätzlicher Grafik:

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":

1
 
Reihenfolge: 0

für Informationsmeldungen über Neuerungen oder aktuelle Themen!

1
2
3
4
 
Ersetze:
[tooltipp_text_info]
Mit:
<span class='tooltip_text' title='<img class="title_img" src="//files.homepagemodules.de/b104774/a_182_2fd3f697.png">
 

[tooltipp_text_info] … Tooltipp-Text … [/tooltipp_text] … Auslösung … [/tooltipp_ende]

Schließen

Iconbar aufrufen unter "Admin > Layout > Iconbar > HTML"
Namen vergeben z.B.: "Tooltipp"
Den folgenden HTML-Code unter "HTML" eingeben
Speichern und das Icon an die gewünschte Stelle platzieren

1
 
<div onclick="xob_insert('[tooltipp_text_info] … Tooltipp-Text … [/tooltipp_text]','[/tooltipp_ende]')" class="xob_icon_cont"><img alt="Tooltipp" title="Tooltipp Info" class="xob_icon" src="//files.homepagemodules.de/b104774/a_182_2fd3f697.png" width="18px"></div>

Auslöse-Icon:

https://files.homepagemodules.de/b104774/a_182_2fd3f697.png

Schließen

für Hilfe und Unterstützung bei Anleitungen oder Funktionsbeschreibungen!

1
2
3
4
 
Ersetze:
[tooltipp_text_hilfe]
Mit:
<span class='tooltip_text' title='<img class="title_img" src="//files.homepagemodules.de/b104774/a_183_1fca777e.png">
 

[tooltipp_text_hilfe] … Tooltipp-Text … [/tooltipp_text] … Auslösung … [/tooltipp_ende]

Schließen

Iconbar aufrufen unter "Admin > Layout > Iconbar > HTML"
Namen vergeben z.B.: "Tooltipp"
Den folgenden HTML-Code unter "HTML" eingeben
Speichern und das Icon an die gewünschte Stelle platzieren

1
 
<div onclick="xob_insert('[tooltipp_text_hilfe] … Tooltipp-Text … [/tooltipp_text]','[/tooltipp_ende]')" class="xob_icon_cont"><img alt="Tooltipp" title="Tooltipp Hilfe" class="xob_icon" src="//files.homepagemodules.de/b104774/a_183_1fca777e.png" width="18px"></div>

Auslöse-Icon:

https://files.homepagemodules.de/b104774/a_183_1fca777e.png

Schließen

für Fehlermeldungen oder kritischen Zuständen!

1
2
3
4
 
Ersetze:
[tooltipp_text_fehler]
Mit:
<span class='tooltip_text' title='<img class="title_img" src="//files.homepagemodules.de/b104774/a_181_74b3dff7.png">
 

[tooltipp_text_fehler] … Tooltipp-Text … [/tooltipp_text] … Auslösung … [/tooltipp_ende]

Schließen

Iconbar aufrufen unter "Admin > Layout > Iconbar > HTML"
Namen vergeben z.B.: "Tooltipp"
Den folgenden HTML-Code unter "HTML" eingeben
Speichern und das Icon an die gewünschte Stelle platzieren

1
 
<div onclick="xob_insert('[tooltipp_text_fehler] … Tooltipp-Text … [/tooltipp_text]','[/tooltipp_ende]')" class="xob_icon_cont"><img alt="Tooltipp" title="Tooltipp Fehler" class="xob_icon" src="//files.homepagemodules.de/b104774/a_181_74b3dff7.png" width="18px"></div>

Auslöse-Icon:

https://files.homepagemodules.de/b104774/a_181_74b3dff7.png

Schließen

für Warnmeldungen und Warnhinweisen!

1
2
3
4
 
Ersetze:
[tooltipp_text_hilfe]
Mit:
<span class='tooltip_text' title='<img class="title_img_w" src="//files.homepagemodules.de/b104774/a_185_f226c42e.png">
 

[tooltipp_text_warn] … Tooltipp-Text … [/tooltipp_text] … Auslösung … [/tooltipp_ende]

Schließen

Iconbar aufrufen unter "Admin > Layout > Iconbar > HTML"
Namen vergeben z.B.: "Tooltipp"
Den folgenden HTML-Code unter "HTML" eingeben
Speichern und das Icon an die gewünschte Stelle platzieren

1
 
<div onclick="xob_insert('[tooltipp_text_warn] … Tooltipp-Text … [/tooltipp_text]','[/tooltipp_ende]')" class="xob_icon_cont"><img alt="Tooltipp" title="Tooltipp Warnhinweis" class="xob_icon" src="//files.homepagemodules.de/b104774/a_185_f226c42e.png" width="18px"></div>

Auslöse-Icon:

https://files.homepagemodules.de/b104774/a_185_f226c42e.png

Schließen

Der Vollständigkeit halber, ohne zusätzliche Tooltipp-Grafik!
Folgender Foren-Code sollte bereits vorhanden sein, siehe Beitrag #3 + #4

1
2
3
4
 
Ersetze:
[tooltipp_text]
Mit:
<span class='tooltip_text' title='
 

[tooltipp_text] … Tooltipp-Text … [/tooltipp_text] … Auslösung … [/tooltipp_ende]

Schließen

Iconbar aufrufen unter "Admin > Layout > Iconbar > HTML"
Namen vergeben z.B.: "Tooltipp"
Den folgenden HTML-Code unter "HTML" eingeben
Speichern und das Icon an die gewünschte Stelle platzieren

1
 
<div onclick="xob_insert('[tooltipp_text] … Tooltipp-Text … [/tooltipp_text]','[/tooltipp_ende]')" class="xob_icon_cont"><img alt="Tooltipp" class="xob_icon" src="//files.homepagemodules.de/b104774/a_182_2fd3f697.png" width="18px"></div>

Auslöse-Icon:

https://files.homepagemodules.de/b104774/a_182_2fd3f697.png

Schließen

Sollen die Tooltipps auf HTML-Seiten auch eine zusätzliche Grafik bekommen, brauchen sie nur an den Anfang von "title" gebracht zu werden!
Der eigentliche Tooltipp-Text folgt dann hinter der Grafik!
Wie für die Beiträge, wird hier der CSS-Eintrag benötigt!

Info-Tooltipp: title='<img class="title_img" src="https://files.homepagemodules.de/b104774/a_182_2fd3f697.png"> . . . '

Hilfe-Tooltipp: title='<img class="title_img" src="https://files.homepagemodules.de/b104774/a_183_1fca777e.png"> . . . '

Fehler-Tooltipp: title='<img class="title_img" src="https://files.homepagemodules.de/b104774/a_181_74b3dff7.png"> . . . '

Warn-Tooltipp: title='<img class="title_img" src="https://files.homepagemodules.de/b104774/a_185_f226c42e.png"> . . . '

Schließen

Viel Erfolg beim Nachbauen!

Wolfgang

Antworten

Moderations-Kommentar:

Beitrag überarbeitet, Anleitung genauer beschrieben!

#6 | Tooltipps gezielt ausblenden! datum

14.12.2019 22:31 (zuletzt bearbeitet: 13.05.2024 09:59)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3865
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1707

Tooltipps gezielt ausblenden! - Alle Versionen
Aktualisiert 13.05.24

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 "" oder besser als Plugin in den "" 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!

1
2
3
4
 

<script>
$('.gallpic,.fn-container').removeAttr('title');
</script>
 

Schließen

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 "" oder besser als Plugin in den "" 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>
 

Beitrag aus dem Support: Tooltipp-Fehler im Kalender

Schließen

Besten Dank für Fragen, Ideen und Inspirationen an "ichwersonst"!

Viel Spaß und gutes Gelingen
Wolfgang

ichwersonst findet das Top!

Antworten

Moderations-Kommentar:

Beitrag überarbeitet!

#7 | Bootstrap - Tooltipps in Forum-Beiträgen (nur fürs V6) - Version 5.2 datum

19.09.2020 13:45 (zuletzt bearbeitet: 13.05.2024 11:09)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3865
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1707

Bootstrap - Tooltipps in Forum-Beiträgen (nur fürs V6) - Version 5.2
Aktualisiert 13.05.24

Die Bootstrap - Tooltipps können auch in den Foren-Beiträgen genutzt werden. Wichtige Textpassagen, Bilder oder Infos können so besonders kenntlich gemacht werden!
Die Tooltipps sind mit HTML bedingt formatierbar!

Was kann Bootstrap - Tooltipp :

Es braucht kein zusätzliche Bibliothek geladen werden! Die Ladezeit der Webseite werden nicht zusätzlich erhöht!
Die Tooltipps sind über die "Eigenes HMTL/JS" formatierbar!
In den Beiträgen sind nur einfache HTML-Formatierungen der Tooltipps wie , , , , <s>, , , ,.... möglich!
Aber! Grafiken und Bilder mit <img src="..." width="500px"> werden akzeptiert!, selbst mit Angabe der Breite und Höhe!
Tooltipps für Wörter sind mit Strichlinien markiert!
Die Tooltipps stellen sich automatisch zur Seite ein und verschwinden nicht bei ungünstigen Positionen!
Tooltipps können mit einer Randfarbe versehen werden!
Soll ein Text, ein Wort oder ein Bild mit einem Tooltipp versehen werden, braucht er nur mit dem neu erstellten Forencode umschlossen werden!

Installation - Template V6

Forencode mit Text und Bild im Tooltipp:

[tooltipp=Das ist ein Tooltipp mit Überschrift & Bild <img src="https://files.homepagemodules.de/b104774/f46t1197p2706n121_bdLBIYKE.jpg" width="200px"> ]Ein Tooltipp mit Bild und Überschrift[/tooltipp]

Einfacher Forencode mit Text im Tooltipp:

[tooltipp=Das ist ein Tooltipp mit Beschreibung]Hallo[/tooltipp]

Forencode mit Bild und Text oben - Ausgelöst durch ein Bild:

[tooltipp=Bild mit Textbeschreibung <img src=//files.homepagemodules.de/b104774/a_319_210025de.png width="200px">][img]//files.homepagemodules.de/b104774/a_320_3887eef8.png[/img][/tooltipp]

Forencode mit Bild und Text rechts - Ausgelöst durch ein Bild:

[tooltipp=<img src=//files.homepagemodules.de/b104774/a_319_210025de.png width="200px"> Bild mit Textbeschreibung][img]//files.homepagemodules.de/b104774/a_320_3887eef8.png[/img][/tooltipp]

Forencode mit Bild und Text unten - Ausgelöst durch ein Bild:

[tooltipp=<img src=//files.homepagemodules.de/b104774/a_319_210025de.png width="200px"> Bild mit Textbeschreibung][img]//files.homepagemodules.de/b104774/a_320_3887eef8.png[/img][/tooltipp]

Forencode mit Bild und Text links - Ausgelöst durch ein Bild:

[tooltipp=Bild mit Textbeschreibung <img src=//files.homepagemodules.de/b104774/a_319_210025de.png width="200px">][img]//files.homepagemodules.de/b104774/a_320_3887eef8.png[/img][/tooltipp]

Tooltipps mit farblich abgesetzten Rand:

Änderung unter "Die Bootstrap Tooltipps in Forum-Beiträgen > Der CSS/SCSS-Eintrag > Tooltipp mit zusätzlicher Randfarbe"

Schließen

Möchte man die Bootstrap Tooltipps in Forum-Beiträgen einsetzen, ist ein neuer Foren-Code und ein CSS/SCSS-Eintrag notwendig.
Wenn noch nicht geschehen, muss die Tooltipp-Funktion aktiviert werden!

Die Tooltipps sind in den Xobor-Foren bereit aktiviert!
Sollten die Tooltipps nicht angezeigt werden, folgende Textzeilen mit in die Webseite kopieren, evtl. document.ready freigeben!

1
2
3
4
5
6
7
8
9
10
 
<script>
/* Tooltipps */
document.addEventListener('DOMContentLoaded', function() {
  $('[data-toggle="tooltip"], [title], span, div, p, a, img').tooltip({
    
    /* Tooltipp Formatierung in Beiträgen */
    content: function() { return $(this).attr('title'); }
  });
});
</script>
 

Schließen

Die folgenden Zeilen kommen in die CSS/SCSS!
Man kann den Hintergrund über Zeile 5+6 farblich anpassen.
Zeile 16-20 ist für die Pfeil zuständig! Hier können sogar unterschiedliche Farben für oben, unten, links und rechts gewählt werden!
Ist der Pfeil nicht erwünscht, Zeile 16-20 löschen und Zeile 17 freigeben!
In Zeile 3 wird die maximale Breite des Tooltipp bestimmt!
Wird Zeile 9+10 freigegeben, kann die Schriftgröße und der Abstand zum Rand eingestellt werden.
Wird Zeile 11 freigegeben, bekommt der Tooltipp abgerundete Ecken!
In Zeile 4+14 sorgt margin für einen Abstand zwischen Text und Tooltip, aber nur beim Bottom-Tooltipp , weil hier sonst der Mauszeiger den Tooltipp verdeckt!
Zeile 25 sorgt beim Mouseover für Cursor-Wechsel zu "Hand "!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
/* Tooltipp ohne Randfarbe */
.tooltip > .tooltip-inner {
max-width: 400px;
margin-top:20px;
background-color: #0d4261;
color: #FFFFFF;
vertical-align: bottom !important;
text-align:center;
/* font-size:18px; */
/* padding:15px; */
/* border-radius:15px; */
}
  
.tooltip .arrow {margin-top:20px;}
 
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {border-top-color: #0d4261 !important;}
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {border-right-color: #0d4261 !important;}
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {border-bottom-color: #0d4261 !important;}
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {border-left-color: #0d4261 !important;}
/*.arrow::before  {border: none !important}*/
  
.tooltipp {text-decoration: underline;text-decoration-style:dashed; }
.tooltipp img {vertical-align: bottom !important;}
 
[title]{cursor:pointer;}
 

Sollen die Tooltipps noch eine Randfarbe bekommen, müssen die folgen Zeilen durch die vorangegangenen Zeilen in CSS/SCSS ersetzt werden!
Man kann den Hintergrund und Schriftfarbe über Zeile 5,6, 31 farblich anpassen.
Zeile 21-40 ist für die Pfeil zuständig! Die Randfarbe wird durch Zeile 9+24 bestimmt!
Ist der Pfeil nicht erwünscht, Zeile 21-40 löschen und Zeile 14 freigeben!
In Zeile 4 wird die maximale Breite des Tooltipp bestimmt!
In Zeile 10+11 kann die Schriftgröße und der Abstand zum Rand eingestellt werden.
In Zeile 3+26 sorgt margin-top für einen Abstand zwischen Text und Tooltip beim Bottom-Tooltipp , damit der Mauszeiger den Tooltipp nicht verdeckt!
Zeile 19 sorgt beim Mouseover für Cursor-Wechsel zu "Hand "!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
/* Tooltipp mit zusätzlicher Randfarbe */
.tooltip > .tooltip-inner {
margin-top:20px;
max-width: 400px;
background-color: #09366a;
color: #FFFFFF;
vertical-align: bottom !important;
text-align:center;
border:1px solid #aaaaaa;
/* font-size:18px; */
/* padding:15px; */
}
 
/*.arrow::before  {border: none !important}*/
  
.tooltipp {text-decoration: underline;text-decoration-style:dashed;}
.tooltipp img {vertical-align: bottom !important;}
 
[title]{cursor:pointer;}
 
.tooltip .arrow {
width: 11px !important;
height: 11px !important;
border: 1px solid #aaaaaa;
bottom: 1px;
margin-top:20px;
}
.tooltip .arrow:before {
width: 11px;
height: 11px;
background-color: #09366a;
border: 0;
}
.tooltip.bs-tooltip-top .arrow {
transform: rotate(-135deg);
}
.tooltip.bs-tooltip-bottom .arrow {
transform: rotate(135deg);
top: 1px;
}
 

Schließen

• Neue Iconbar aufrufen

  • "Neue Icons hinzufügen" anklicken.
  • Reiter Forencode anklicken.
  • Erweiterte Foren-Code einblenden.
  • Werte eintragen und speichern!
  • Forencode in "nicht sichtbar" verschieben.

1
2
3
4
 
Ersetze:
[tooltipp={{tooltipp}}] ... [/tooltipp]
Mit:
<span class='tooltipp' title='{{tooltipp}}' data-toggle='tooltip' data-placement='bottom' data-html='true'> ... </span>
 

1
2
 
Grafik:
//files.homepagemodules.de/b2001010/a_800_4ec558a8.png
 

Unter "Weitere Einstellungen":

1
 
Reihenfolge: 0

Schließen

[tooltipp=Das ist ein Tooltipp mit beschreibenden Eigenschaften!] Text Text Text [/tooltipp]

Schließen

Iconbar aufrufen unter "Admin > Layout > Iconbar > HTML "
Namen vergeben z.B.: "Tooltipp "
Den folgenden HTML-Code unter "HTML " eingeben
Speichern und das Icon an die gewünschte Stelle platzieren

1
 
<div onclick="xob_insert('[tooltipp= Tooltipp-Text]','[/tooltipp]')" class="xob_icon_cont"><img alt="Tooltipp" title="Tooltipp" class="xob_icon" src="//files.homepagemodules.de/b2001010/a_800_4ec558a8.png" width="18px"></div>

Auslöse-Icon:

[img=18px]//files.homepagemodules.de/b2001010/a_800_4ec558a8.png[/img] https://files.homepagemodules.de/b2001010/a_800_4ec558a8.png

Schließen

Bis dann und viel Spaß
Wolfgang

Antworten

Moderations-Kommentar:

Fehler Pfeilposition behoben.

#8 | Update: Professionelle Tooltipps mit "jQuery UI" formatierbar - Version 4 datum

16.11.2025 01:05

Update: Professionelle Tooltipps mit "jQuery UI" formatierbar - Version 4

Bitte mit der Maus drüberfahren!

Die Tooltipps werden normalerweise direkt vom Browser ausgegeben, nur starr und ohne besondere Eigenschaften!
Nimmt man sich "jQuery UI" (einzeiliger Eintrag im Skript ) zu Hilfe, können die Tooltipps vielseitig formatiert, im Forum und in Beiträgen eingesetzt werden!
Leider kann es ohne zusätzliche Maßnahmen vorkommen das Tooltipps doppelt angezeigt werden (Browser + jQuery) oder stehenbleiben können!
Mit dem folgenden Update werden die beiden Probleme behoben.
Zusätzlich ist eine Installation im neuen Xobor (v6) jetzt möglich!

Alles in Beitrag #4 nachgetragen!

Wolfgang

Dankeschön findet das Top!

Antworten

Kleine Formatfehler beheben im responsive Template Xobor (v6) & Mobil » « Bilder aus "Datei anhängen" + "URL-Bilder" mit einem Klick öffnen & schließen! - Für alle Templates! - Teil 1-4

Ähnliche Themen

Antworten

Letzter Beitrag

Seitenmenü - Version 1+2
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Daishi 8 23.09.2023 09:34
Wolfgang • Zugriffe: 772
Xobor-Superklick in der Iconbar: Version 1-5
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang 7 25.09.2021 15:59
Wolfgang • Zugriffe: 3642
Super Kategorienauswahl für das Smiley-Menü - Version 1-3
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang 9 06.10.2023 19:50
bienchen • Zugriffe: 4162
Samsung Magician - Neue Version! - Tuning für SSD's
Erstellt im Forum Ärger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe? von Wolfgang 0 16.01.2017 17:12
Wolfgang • Zugriffe: 1310
Jetzt! - Windows 7 SP1 in allen Versionen als Download!
Erstellt im Forum Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps. von Wolfgang 0 27.02.2012 22:13
Wolfgang • Zugriffe: 1636

Bilder vergrößern per "Mouseover", mittels "CSS" oder "Tooltipps"
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

18.01.2020 17:44
von

Wolfgang • Zugriffe: 20911

Forum-Bilder mit einstellbarer Größe, Tooltipps und Beschreibung ausstatten - Teil 1-3!
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

08.06.2022 10:15
von

Wolfgang • Zugriffe: 5265

DropDown Menü für die Iconbar - Mit "select"
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 9 07.02.2024 12:42
Anne • Zugriffe: 15530
Die Top-Favoriten aus diesem Forum
Erstellt im Forum Alles, was noch so übrig bleibt. von Wolfgang 0 10.04.2007 17:57
Wolfgang • Zugriffe: 19811

Der Treffpunkt für Hilfe, Tricks & Tipps » XOBOR-Foren und Homepages »

Das neue Template Xobor (v6). » Formatierbare Tooltipps oder Quickinfos - Version 1-5

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gefällt und Du Dich hier genauso wohlfühlst wie wir.

Um Dir und den anderen Mitgliedern das Bestmögliche bieten zu können, würden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras ergänzen.

Wenn Du uns dabei unterstützen möchtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 45 €

41%