Forum - Tooltipps mit Framework 'Bootstrap 4' - V6

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

Seite 2 von 2 � Seite 1 2 Seite �

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

#11 | 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:	3314
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

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

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

#12 | 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:	3314
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

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

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!

Seite 2 von 2 � Seite 1 2 Seite �

�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: 2924
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: 20064

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

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: 14794
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: 18585

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%