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. Die besten Links! Empfehlenswerte und interessante Links! Link - Suche. Verschiedenes Elektronik & Elektrotechnik - Fragen & Antworten 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:	3621
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1490

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:	3621
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1490

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]!
 

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

Standardisierte Tooltipps mit "title" - Version 2Aktualisiert 08.05.24

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

Professionelle Tooltipps mit "jQuery UI" formatierbar - Version 4Aktualisiert 06.10.24

Tooltipps - Erweiterung Layout! Aktualisiert 13.05.24

Tooltipps gezielt ausblenden! - Alle VersionenAktualisiert 13.05.24

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

Update: Tooltipps

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

Standardisierte Tooltipps mit "title" - Version 2
Aktualisiert 08.05.24

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

Professionelle Tooltipps mit "jQuery UI" formatierbar - Version 4
Aktualisiert 06.10.24

Tooltipps - Erweiterung Layout!
Aktualisiert 13.05.24

Tooltipps gezielt ausblenden! - Alle Versionen
Aktualisiert 13.05.24

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