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 Betriebssystem MS Windows 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 10, 8.1, 8 und 7 - Fragen & Antworten �rger mit Ihrem PC? �rger mit dem PC - Vorbeugung und Hilfe �rger mit dem PC - 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 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: Heute 00:03)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3318
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

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

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.

Achtung Baustelle!

Der Beitrag wird bald zur Verf�gung stehen.

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!

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

Auslöse-TextTooltipp-Text

So sieht der Forum-Code für die Tooltipps aus:
Der Forum-Code wird mit einem Klick auf dieses Symbol

eingefügt!

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

Installation

• Durch diese HTML-Version können Sie die Tooltipps direkt in Ihre Homepage einbauen oder auch bestimmte Bereiche im Forum mit Tooltipps versehen.

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
 
<style>
span.infobox {
text-decoration:none;
border-bottom: 1px dotted #000000;
position: relative;
outline: none;
cursor:help;
}
 
span.infobox span { 
position:absolute;
left: -999em;
padding:3px 12px 3px 12px; 
}
 
span.infobox:hover span {  
left: 3em; 
top: 4em; 
z-index: 99;
border:4px double #333333; 
color:#000090; 
background:#dddddd; 
font-size: 12px;
border-radius:9px;
width: 250px;	
}
</style>
 
<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>
 
 

Schließen

• 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.

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
 
span.infobox {
text-decoration:none;
border-bottom: 1px dotted #000000;
position: relative;
outline: none;
cursor:help;
}
 
span.infobox span { 
position:absolute;
left: -999em;
padding:3px 12px 3px 12px; 
}
 
span.infobox:hover span {  
left: 3em; 
top: 4em; 
z-index: 99;
border:4px double #333333; 
color:#000090; 
background:#dddddd; 
font-size: 12px;
border-radius:9px;
width: 250px;	
}
 

Schließen

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

1
2
 
Ersetze: [Tipp]
Mit:  <span class="infobox">
 

1
2
 
Ersetze: [Text]
Mit:  <span>
 

1
2
 
Ersetze: [/Tipp]
Mit:  </span></span>
 

Der Forencode sieht dann so aus:

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

Schließen

  • Unter "Admin > Layout > Iconbar > Iconbar bearbeiten > HTML" den folgenden Code einsetzen.
  • Unter "Name" eine Bezeichnung eintragen.
  • Fertig!

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!

Schließen

Infos über Tooltipps: Tooltipp-Infos auf Wikipedia

Bis dann und viel Erfolg

Wolfgang

Antworten

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

23.01.2008 02:35 (zuletzt bearbeitet: Heute 00:05)

Standardisierte Tooltipps mit "title" - Version 2
Aktualisiert 12.12.21

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!

Achtung Baustelle!

Der Beitrag wird bald zur Verf�gung stehen.

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:
<select title="Menüerklärung" ........>

Schließen

Tooltipp für die Untermenü's:
<optgroup title="Erklärung für das Untermenü" ......">

Schließen

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

Schließen

Hier ein Beispiel für eine Verlinkung zum Forum:

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>

Schließen

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>

Schließen

Bis dann

Wolfgang

Antworten

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

27.09.2013 01:20 (zuletzt bearbeitet: Heute 00:13)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3318
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

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

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

Die Tooltipps mit "jQueryUI" 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!

Achtung Baustelle!

Der Beitrag wird bald zur Verf�gung stehen.

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)

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

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
 
<style>
#tooltipp_min {text-align:left;max-width: 700px !important;font-size:12px !important;font-family:arial !important;background:#eeeeee !important;padding:3px 15px 3px 15px;color:#444477;border: 2px solid #555588 !important;border-radius:7px !important;box-shadow: 3px 3px 6px #aaaaaa;display:none;position:absolute;z-index:99999999;}
span[title]{text-decoration:underline;}
</style>
 
<script>
function newload() {
$(function(){
 
$('!*[title^=""]').hover(function(){
$('span[title]').css({'cursor':'pointer','text-decoration':'underline'});
var title = $(this).attr('title');
$(this).data('TippText', title).removeAttr('title');
$('#tooltipp_min').remove();
$('<div id="tooltipp_min"></div>').html(title).prependTo('body').fadeIn('slow');
}, function() {
$(this).attr('title', $(this).data('TippText'));
$(this).attr({'cursor':'','text-decoration':''});
$('#tooltipp_min').remove();
}).mousemove(function(e) {
$('#tooltipp_min').css('top', e.pageY + 30);  
var tippWidth = window.innerWidth - $('#tooltipp_min').width()
if (e.pageX > tippWidth - 140){
$('#tooltipp_min').css('left', tippWidth - 110); 
}else{
$('#tooltipp_min').css('left', e.pageX + 30);  
}
});
 
});
setTimeout(newload,500);
};
newload();
</script>
 

Schließen

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

1
 
Reihenfolge: 0

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

1
2
3
4
 
Ersetze:
[/tooltipp_text]
Mit:
'>
 

1
2
3
 
Ersetze:[/tooltipp_ende]
Mit:
</span>
 

Schließen

[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" title="Tooltipp" class="xob_icon" src="https://files.homepagemodules.de/b104774/f46t1197p2706n155_gdASkQsM.gif" width="18px"></div>

Auslöse-Icon:

https://files.homepagemodules.de/b104774/f46t1197p2706n155_gdASkQsM.gif

Schließen

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

1
2
3
4
 
Ersetzen: 
$('#tooltipp_min').css('top', e.pageY + 30); 
Mit: 
$('#tooltipp_min').css('top', e.pageY - $('#tooltipp_min').height() - 35); 
 

Schließen

Die flinken Tooltipps in Aktion:

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

• Einfache im Beitrag!

1
 
Einfache [tooltipp_text]Einfache Anzeige nur mit normalen Text-Hinweis[/tooltipp_text]Text-Darstellung[/tooltipp_ende] im Beitrag!

Schließen

1
 
Einfache <span title='Einfache Anzeige nur mit normalen Text-Hinweis'>Text-Darstellung</span> im Beitrag!

Schließen

• Großer Hinweis mit !

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

Schließen

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

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

Schließen

1
2
3
4
5
 
<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 Bild-Unterschrift notwendig: Multi-Assistent: Bildunterschrift-Erweiterung für die Iconbar

1
 
[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]

Schließen

• Forencodes für Multi-Assistent: Bildunterschrift-Erweiterung für die Iconbar 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 Bildes, 
<br>
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

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

22.08.2015 20:17 (zuletzt bearbeitet: Heute 00:08)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3318
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

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

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

Beispiel-Tooltipp - Bitte testen!
Mit umfangreicher BB-Formatierung (Foren-Codes)!

Mit der folgenden Version können Tooltipps im Forum über "title" und in Beiträgen mit entsprechenden BB-Code angezeigt werden.
Sie sind mit den 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 in den Beiträgen mit BB-Codes formatierbar!
Kleine CSS
Position des angezeigten Tooltipps einstellbar!

Optional

Ein- und Ausblendeffekte wählbar.
Ein- und Ausblendzeiten einstellbar!

Installation für die Templates (v1-4)

HTML-Version im Überblick

JavaScript eintragen

CSS eintragen

Neue Forum-Codes anlegen

Für die Iconbar

"JQuery UI" bietet außer "slide" und "blind" noch weitere außergewöhnliche Effekte an.
Sie werden wie auch "fade" und "slide" in Zeile 28, bzw. 12 eingebaut.
Zu bedenken ist, dass es bei Aktivierung der Effekten zu einem ruckelnden Verhalten kommen kann! Bitte prüfen!

Folgende Effekte sind möglich:

"slide", "fade", blind", "bounce", "clip", "drop", "explode", "fold", "highlight", "puff", "pulsate", "scale", "shake", "size", "transfer".

Schließen

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

#5 | Professionelle Tooltipps mit "JQuery UI" - Weitere 13 neue Effekte datum

28.08.2015 00:39 (zuletzt bearbeitet: Gestern 23:02)

Achtung Baustelle!

Der Beitrag wird bald zur Verf�gung stehen.

DJ-Frechdax findet das Top!

Antworten

#6 | Super flinke Tooltipps mit dem hauseigenen jQuery! datum

18.08.2019 10:12 (zuletzt bearbeitet: Heute 00:06)

Achtung Baustelle!

Der Beitrag wird bald zur Verf�gung stehen.

Hans58 findet das Top!

Antworten

#7 | Tooltipps - Erweiterung Layout! datum

02.09.2019 08:48 (zuletzt bearbeitet: Heute 00:10)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3318
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

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

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:

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!

Achtung Baustelle!

Der Beitrag wird bald zur Verf�gung stehen.

Installation - Business Template V4

  • Eintrag in ""!
  • 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

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 #7

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

#8 | Tooltipps gezielt ausblenden! datum

14.12.2019 22:31 (zuletzt bearbeitet: 13.12.2021 16:35)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3318
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

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

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

#9 | Tooltipps mit Framework 'Bootstrap 4' - V6 datum

13.09.2020 15:12 (zuletzt bearbeitet: 13.12.2021 16:40)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3318
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

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

Tooltipps mit Framework 'Bootstrap 4' (nur fürs V6) - Version 5.1
Aktualisiert 30.05.21

Das neue responsive Template V6 ist mit einen Frontend-Framework namens "Bootstrap4" aufgebaut!
Bootstrap bringt von Haus aus eine Menge mit, unter anderem die Gestaltung von Tooltipps!
Auch sind sie formatierbar und können sogar einfache HTML-Tags, aber auch Bilder und Grafiken umsetzen!
Bootstrap-Tooltipps könnten auch in den Templates V1-4 genutzt werden, aber da hier zusätzliche Skripte geladen werden müssen und die Ladezeiten anwachsen, ist es nicht ratsam!

Installation - Responsive Template V6

Das V6 ist etwas spärlich mit Tooltipps ausgestattet.
Allein über die "classes" oder "id's" können Tooltipps mit individuellen Texten gesetzt werden!
Wer hier nachhelfen möchte, geht wie folgt vor!

User-Info im Beitrag

Administration in der Kopfleiste

Forumübersicht

In aktive Blogs

Blog-Themen

User-Menü in der oberen Leiste

Im Talk

Schlie�en

Welcher Link oder Text soll mit einem Tooltipp ausgestattet werden?
classes oder id's über rechte Maustaste und "Untersuchen" ausfindig machen!
Gibt es keine direkte "classes" oder "id's", dann zusätzlichen Tags einsetzen (siehe Beispiel)!Neue Klassen durch ein Komma trennen!
Mit dem Zusatz html=true können sogar kleine Grafiken mit eingebunden werden!
Sind Links bereits mit einem Tooltipp belegt, wie "Administration", können Text und Grafik nicht verändert werden.

1
2
3
4
 
<script>
$('#adminlink,.lastinfo a, .userlink,a.blog-username-extend-link,#activelist span a:first,.tree_message_content strong a,#foverview_stat a span,.forumstats a').tooltip({title: "<img src='//files.homepagemodules.de/b2001010/a_648.png'> Zum Profil",html: true}); 
$('#usertoggler_menu_lg').tooltip({title: "<img src='//files.homepagemodules.de/b2001010/a_648.png'> Zum User-Menü",html: true});
</script>
 

Schlie�en

Die folgenden Zeilen kommen in die CSS/SCSS!
Man kann den Hintergrund über Zeile 5+6 farblich anpassen.
Zeile 13-16 ist für die Pfeil zuständig!
Ist der Pfeil nicht erwünscht, Zeile 13-16 löschen und Zeile 17 freigeben!
In Zeile 4 wird die maximale Breite des Tooltipp bestimmt!
In Zeile 9+10 kann die Schriftgröße und der Abstand zum Rand eingestellt werden.
In Zeile 3+15 sorgt margin für einen Abstand zwischen Text und Tooltip, aber nur beim Bottom-Tooltipp, weil hier sonst der Mauszeiger den Tooltipp 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
 
/* Tooltipp */
.tooltip > .tooltip-inner {
margin-top:20px;
max-width: 400px;
background-color: #09366a;
color: #FFFFFF;
vertical-align: bottom !important;
text-align:center;
/* font-size:18px; */
/* padding:15px; */
}
 
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {border-top-color: #09366a !important;}
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {border-right-color: #09366a !important;}
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {border-bottom-color: #09366a !important;}
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {border-left-color: #09366a !important;}
/*.arrow::before  {border: none !important}*/
 
[title]{cursor:pointer;}
 

Schlie�en

Bis dann und gutes Gelingen
Wolfgang

Antworten

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

19.09.2020 13:45 (zuletzt bearbeitet: 13.12.2021 16:39)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3318
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

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

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

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
 
<script>
//$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
//});
</script>
 

Schlie�en

Die folgenden Zeilen kommen in die CSS/SCSS!
Man kann den Hintergrund über Zeile 5+6 farblich anpassen.
Zeile 13-16 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 13-16 löschen und Zeile 17 freigeben!
In Zeile 4 wird die maximale Breite des Tooltipp bestimmt!
In Zeile 9+10 kann die Schriftgröße und der Abstand zum Rand eingestellt werden.
In Zeile 3+15 sorgt margin für einen Abstand zwischen Text und Tooltip, aber nur beim Bottom-Tooltipp, weil hier sonst der Mauszeiger den Tooltipp verdeckt!
Zeile 22 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
 
/* Tooltipp ohne Randfarbe */
.tooltip > .tooltip-inner {
margin-top:20px;
max-width: 400px;
background-color: #09366a;
color: #FFFFFF;
vertical-align: bottom !important;
text-align:center;
/* font-size:18px; */
/* padding:15px; */
}
 
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {border-top-color: #2f6483 !important;}
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {border-right-color: #2f6483 !important;}
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {border-bottom-color: #2f6483 !important;}
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {border-left-color: #2f6483 !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:

https://files.homepagemodules.de/b2001010/a_800_4ec558a8.png

Schlie�en

Bis dann und viel Spaß
Wolfgang

Antworten

Bilder aus "Datei anhängen" mit einem Klick öffnen & schließen! - Für alle Templates! - Teil 1-4 � � YouTube-Videogalerie für das eigene Forum installieren!

�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: 425
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: 2934
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: 3450
Samsung Magician - Neue Version! - Tuning für SSD's
Erstellt im Forum �rger mit dem PC - Vorbeugung und Hilfe von Wolfgang 0 16.01.2017 17:12
Wolfgang • Zugriffe: 1050
Jetzt! - Windows 7 SP1 in allen Versionen als Download!
Erstellt im Forum Betriebssystem MS Windows 10, 8.1, 8 und 7 - Tricks & Tipps von Wolfgang 0 27.02.2012 22:13
Wolfgang • Zugriffe: 1351

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

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

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: 14824
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: 18600

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: 85 €

78%

Zum Einbau: Google-Translator!

Favoriten speichern

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

Standardisierte Tooltipps mit "title" - Version 2Aktualisiert 12.12.21

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

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

Tooltipps - Erweiterung Layout! - Version 4.3Aktualisiert 13.12.21

Tooltipps gezielt ausblenden! - Alle VersionenAktualisiert 13.12.21

Tooltipps mit Framework 'Bootstrap 4' (nur fürs V6) - Version 5.1Aktualisiert 30.05.21

User-Info im Beitrag

User-Info im Beitrag

Administration in der Kopfleiste

Administration in der Kopfleiste

Forumübersicht

Forumübersicht

In aktive Blogs

In aktive Blogs

Blog-Themen

Blog-Themen

User-Menü in der oberen Leiste

User-Menü in der oberen Leiste

Im Talk

Im Talk

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

Forum Lesezeichen ❌

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

Standardisierte Tooltipps mit "title" - Version 2
Aktualisiert 12.12.21

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

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

Tooltipps - Erweiterung Layout! - Version 4.3
Aktualisiert 13.12.21

Tooltipps gezielt ausblenden! - Alle Versionen
Aktualisiert 13.12.21

Tooltipps mit Framework 'Bootstrap 4' (nur fürs V6) - Version 5.1
Aktualisiert 30.05.21

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