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

Seite 1 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

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

21.01.2008 18:45 (zuletzt bearbeitet: 12.12.2021 00:07)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3034
Punkte:	3678
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Board Nr:
Likes	906

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

Die hier vorgeschlagenen Tooltipps basieren auf reiner CSS (Cascading Style Sheets) und benötigen keine Aktivierung von JavaScript.

Tooltipps sind Kurz- oder Quickinfos, die angezeigt werden, wenn die Maus über ein dafür vorgesehenes Objekt zeigt.
Mit dem folgenden Beitrag ist es möglich beliebige Textstellen, Bilder oder Links mit formatierbaren Tooltipps, zu versorgen.
Die Tooltipps können in ihrer Farbe und Größe über die Symbolbar neu formatiert werden. Absätze, Leerzeichen, Sonderzeichen, sowie Bilder, können in den Tooltipps mit eingebaut werden.
Die Wörter oder Objekte, die einen Infotext enthalten, werden automatisch mit einer gepunkteten Linie gekennzeichnet.
Das Tooltipp-Fenster öffnet sich unterhalb des Objekts und wandert allerdings in der CSS-Version nicht mit dem Mauszeiger mit!
Einfache CSS-Tooltipps sind für Anzeigen im Randbereich nicht so gut geeignet. Hier werden die Tooltipps mehr oder weniger stark umgebrochen!

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

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

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
32
 
<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 | RE: Standard - Tooltipps für das Forum datum

23.01.2008 02:35 (zuletzt bearbeitet: 12.12.2021 00:12)

Standardisierte Tooltipps für das Forum - Version 2
Aktualisiert 12.12.21

Es ist einfach in der Symbolbar oder im übrigen Forum mittels "Mouseover" zusätzliche, erklärende Tooltipps anzuzeigen.

Mit title="erklärender Text" kann an jeder beliebigen Stelle ein Text angezeigt werden!
Der Vorteil von "title" ist, dass ihn jeder gängige Browser umsetzen kann!
Selbst Links können mit Tooltipps versehen werden!

Diese Tooltipps lassen sich allerdings nicht formatieren, werden nur ca. 10sek angezeigt und bestimmte Satz-Zeichen lassen sich nicht verwenden.
Aber nicht immer sind diese Optionen notwendig und hier findet dieser Tooltipp seinen Platz!

Zu beachten ist, dass das Attribut "alt" nur vom Internet Explorer als Tooltipp angezeigt wird.
Das Attribut "alt" sollte daher den gleichen Text aufweisen wie "title", um in allen Browser die gleiche Info anzugeben.
Das Attribut "alt" ist aber nur bei Bildern notwendig.
Das Attribut "alt" soll einen alternativen Text für ein Bild enthalten, um den Inhalt des Bildes (Link) auch dann zugänglich zu machen, wenn keine Bilder geladen werden.

Hier einige sinnvolle Beispiele für das DropDown Menü:

Für die Menüeübersicht sieht es so aus:
<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 | Professionelle Tooltipps mit "JQuery UI" - Version 3.1 datum

27.09.2013 01:20 (zuletzt bearbeitet: 12.12.2021 00:27)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3034
Punkte:	3678
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Board Nr:
Likes	906

Professionelle Tooltipps mit "JQuery UI" - Version 3.1
Aktualisiert 12.12.21

Mit der folgenden Version können Tooltipps im Forum über "title" und in Beiträgen mit entsprechenden BB-Code angezeigt werden. Sie sind mit folgenden Merkmalen verbunden:

Einbinden der JavaScript-Bibliothek "JQuery UI"
Kein Eingriff ins Template notwendig!
Präzises platzieren der Tooltipps in allen Browsern
Automatisches anordnen im Bereich von Rändern
Animiertes auf- und zuklappen der Tooltipps
Zeitverzögertes Einschalten der Tooltipps
Tooltipps auch in den Beiträgen formatierbar
Kleine CSS
Wenn "jQuery" noch nicht vorhanden ist, "Auskommentierung" entfernen (In Xobor-Templates bereits vorhanden!)
Position des angezeigten Tooltipps einstellbar!

Installation

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

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
<html>
<head>
<title>Tooltipps mit JQuery</title>
 
<style>
/*Tooltipps mit  title*/
body {font-size: 75%;background-color:#ffffff;}
body .ui-tooltip {border: 2px solid #A2A2A2;}
.ui-tooltip {z-index: 9999;position: absolute;max-width: 500px;padding:5px 15px 5px 15px;color:#0000aa;box-shadow: 3px 3px 6px #aaaaaa;}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {border-radius: 10px;}
.ui-widget-content {background: #ffffff;}
.tooltipp_title {cursor:pointer;}
 
/*Tooltipps in Beiträgen*/
.tooltip {display:none;max-width: 300px;}
.tooltip_text {cursor:pointer;border-bottom:1px dotted blue;}
.tooltip_text a {text-decoration:none;}
</style>
 
<!-- Wenn jQuery noch nicht vorhanden ist, "Auskommentierung" entfernen (In Xobor-Templates bereits vorhanden!). -->
<!-- <script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script> -->
<!-- Wenn jQueryUI bereits vorhanden ist, folgende Zeile "auskommentieren" -->
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
<script>
/* Tooltipps */
$(function(){
$(document).tooltip({
/* Position Tooltipp */
position: { my: "left+8 top+30"},
/* Maus folgen */
track: true,
/* Angewendete Elemente (CSS-Selektoren) */
items: '[title], .tooltip_text',
/* Ein-/Ausblend-Effekte */
show: {
effect: 'slideDown',
delay: 300 /* Einschaltverzögerung */
},
hide: {
effect: 'blind',
delay: 100 /* Haltedauer */
},
/* Inhalt der Tooltips festlegen */
content: function() {
var element = $(this);
 
/* Rückwärtskompatibilität zu bisherigen Tooltips */
if (element.is('.tooltip_text')) {
return element.find('.tooltip').html();
}
 
if (element.is('[title]')) {
return element.attr('title');
}
 
}
});
});
 
</script>
 
</head>
<body>
<br>
<p>Dies ist ein Text mit einem <span class="tooltip_text">Tooltipp<span class="tooltip"><b>Infobox:</b><br>
Texte und Opjekte mit Tooltipps</span></span> , der bei allen gängigen Browsern funktioniert! </p>
 
Auch die Version mit "<span class="tooltipp_title" title="Version mit 'title' im Forum" ><u>title</u></span>" funktioniert.
 
</body>
</html>
 

Schlie�en

• Wenn vorhanden, altes JavaScript für Tooltipps löschen und folgendes JavaScript unter "Admin > Layout > Kopf- & Fußzeile > Kopfzeile" eintragen!
• Die Zeitwerte für die Ein- und Ausblendverzögerung können gegebenfalls angepasst werden. Sind aber soweit optimiert!

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
41
42
 
<!-- Wenn jQuery noch nicht vorhanden ist, "Auskommentierung" entfernen (In Xobor-Templates bereits vorhanden!). -->
<!-- <script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script>-->
<!-- Wenn jQueryUI bereits vorhanden ist, folgende Zeile "auskommentieren"  -->
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
<script>
/* Tooltipps */
 
	$(function(){
	$(document).tooltip({
	/* Position Tooltipp */
	position: { my: "left+8 top+30"},
	/* Maus folgen */
	track: true,
	/* Angewendete Elemente (CSS-Selektoren) */
	items: '[title], .tooltip_text',
	/* Ein-/Ausblend-Effekte */
	show: {
	effect: 'slideDown',
	delay: 300  /* Einschaltverzögerung */
	},
	hide: {
	effect: 'blind',
	delay: 100  /* Haltedauer */
	},
	/* Inhalt der Tooltips festlegen */
	content: function() {
	var element = $(this);
 
	/* Rückwärtskompatibilität zu bisherigen Tooltips */
	if (element.is('.tooltip_text')) {
	return element.find('.tooltip').html();
	}
 
	if (element.is('[title]')) {
	return element.attr('title');
	}
 
	}
	});
	});
 
</script>
 

Schlie�en

CSS unter "Admin > Layout > Farben & Einstellungen > CSS" in "Eigener CSS Code" eintragen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 

/*Tooltipps mit title*/
body {font-size: 75%;background-color:#ffffff;}
body .ui-tooltip {border: 2px solid #A2A2A2;}
.ui-tooltip {z-index: 9999;position: absolute;max-width: 500px;padding:5px 15px 5px 15px;color:#0000aa;box-shadow: 3px 3px 6px #aaaaaa;}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {border-radius: 10px;}
.ui-widget-content {background: #ffffff;}
.tooltipp_title {cursor:pointer;}
 
/*Tooltipps in Beiträgen*/
.tooltip {display:none;max-width: 300px;}
.tooltip_text {cursor:pointer;border-bottom:1px dotted blue;}
.tooltip_text a {text-decoration:none;}
 
 

Schlie�en

  • Forum-Code umsetzen in der Iconbar unter "Foren-Code" und "Ersetze:" und Mit:"!
  • Der Forencode wird unter "Admin > Layout > Iconbar > Iconbar bearbeiten > Foren-Code " eingetragen.
  • Es ist darauf zu achten, dass der erweiterte Foren-Code ausblendet ist!
  • Eintragung erfolgt in "Ersetze:" und "Mit:"!

Ersetze:

1
 
[tipp]

Mit:

1
 
<span class="tooltip_text">

Ersetze:

1
 
[info2]

Mit:

1
 
<span class="tooltip">

Ersetze:

1
 
[/tipp]

Mit:

1
 
</span></span>

Der Forencode sieht dann so aus:

[tipp] Auslöse-Text [info2] 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

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

Tausendstern findet das Top!

Antworten

#4 | RE: Professionelle Tooltipps mit "JQuery UI" - mehr als 10 neue Effekte datum

29.09.2013 06:06 (zuletzt bearbeitet: 14.09.2020 18:38)

Professionelle Tooltipps mit "JQuery UI" - mehr als 10 neue Effekte - Version 3.2
Aktualisiert 13.12.21

Mit der folgenden Version können die Tooltipps mit mehr als 10 unterschiedlichen Effekten ein- und ausgeblendet werden:

Standard - Leichtes Fade in/out
Zeitbestimmendes Fade in/out
Zeitbestimmendes, horizontales Slide in/out
Zeitbestimmendes, vertikales Slide in/out
Kombiniertes, zeitbestimmendes, horizontales Slide-in / Fade-out
Kombiniertes, zeitbestimmendes, horizontales Slide-in / vertikales Slide-out
Kombiniertes, zeitbestimmendes, vertikales Slide-in / Fade-out
Kombiniertes, zeitbestimmendes, vertikales Slide-in / horizontales Slide-out
Kombiniertes, zeitbestimmendes Fade-in / horizontales Slide-out
Kombiniertes, zeitbestimmendes Fade-in / vertikales Slide-out
Zeitbestimmendes Fade-in / sofortiges Ausblenden
Zeitbestimmendes, horizontales Slide-in / sofortiges Ausblenden
Zeitbestimmendes, vertikales Slide-in / sofortiges Ausblenden
Sofortiges Einblenden / zeitbestimmendes Fade-out
Sofortiges Einblenden / zeitbestimmendes, horizontales Slide-out
Sofortiges Einblenden / zeitbestimmendes, vertikales Slide-out
Sofortiges Ein- und Ausblenden / ohne Animation

Installation / Änderung

Die Installation erfolgt wie in Version 3.1. Um die Änderungen zu erzielen, wir folgender Bereich angepasst:

// Ein-/Ausblend-Effekte:
show: {
effect: 'slideDown',
delay: 300
},
hide: {
effect: 'blind',
delay: 100
},

Die einfachste Methode. Hier werden die Zeilen gelöscht!
Der Tooltipp wird zügig, ein- und ausgeblendet.


// Ein-/Ausblend-Effekte:
show: {
effect: 'slideDown',
delay: 300
},
hide: {
effect: 'blind',
delay: 0
},

Schlie�en

Die Zeiten können beliebig, aber auch unterschiedlich angepasst werden.
Der Tooltipp wird langsam ein- und ausgeblendet.


// Ein-/Ausblend-Effekte:
show: {
effect: 'fade',
delay: 500
},
hide: {
effect: 'fade',
delay: 500
},

Schlie�en

Die Zeiten können beliebig, aber auch unterschiedlich angepasst werden.
Der Tooltipp läuft von links langsam rein und wieder raus.


// Ein-/Ausblend-Effekte:
show: {
effect: 'slide',
delay: 500
},
hide: {
effect: 'slide',
delay: 500
},

Schlie�en

Die Zeiten können beliebig, aber auch unterschiedlich angepasst werden.
Der Tooltipp läuft von oben langsam rein und wieder raus.


// Ein-/Ausblend-Effekte:
show: {
effect: 'slideDown',
delay: 500
},
hide: {
effect: 'slideUp',
delay: 500
},

Schlie�en

Die Zeiten können beliebig, aber auch unterschiedlich angepasst werden.
Der Tooltipp läuft von links langsam rein und wird langsam ausgeblendet.


// Ein-/Ausblend-Effekte:
show: {
effect: 'slide',
delay: 500
},
hide: {
effect: 'fade',
delay: 500
},

Schlie�en

Die Zeiten können beliebig, aber auch unterschiedlich angepasst werden.
Der Tooltipp läuft von links langsam rein und langsam nach oben wieder raus.


// Ein-/Ausblend-Effekte:
show: {
effect: 'slide',
delay: 500
},
hide: {
effect: 'slideDown',
delay: 500
},

Schlie�en

Die Zeiten können beliebig, aber auch unterschiedlich angepasst werden.
Der Tooltipp läuft von oben langsam rein und wird langsam wieder ausgeblendet.


// Ein-/Ausblend-Effekte:
show: {
effect: 'slideDown',
delay: 500
},
hide: {
effect: 'fade',
delay: 500
},

Schlie�en

Die Zeiten können beliebig, aber auch unterschiedlich angepasst werden.
Der Tooltipp läuft von oben langsam rein und langsam nach links wieder raus.


// Ein-/Ausblend-Effekte:
show: {
effect: 'slideDown',
delay: 500
},
hide: {
effect: 'slide',
delay: 500
},

Schlie�en

Die Zeiten können beliebig, aber auch unterschiedlich angepasst werden.
Der Tooltipp wird langsam eingeblendet und läuft nach links langsam raus.


// Ein-/Ausblend-Effekte:
show: {
effect: 'fade',
delay: 500
},
hide: {
effect: 'slide',
delay: 500
},

Schlie�en

Die Zeiten können beliebig, aber auch unterschiedlich angepasst werden.
Der Tooltipp wird langsam eingeblendet und läuft nach oben langsam raus.


// Ein-/Ausblend-Effekte:
show: {
effect: 'fade',
delay: 500
},
hide: {
effect: 'slideUp',
delay: 500
},

Schlie�en

Die Zeit kann beliebig angepasst werden.
Der Tooltipp wird langsam eingeblendet und danach sofort wieder ausgeblendet.


// Ein-/Ausblend-Effekte:
show: {
effect: 'fade',
delay: 500
},
hide: {
effect: 'none',
delay: 0
},

Schlie�en

Die Zeit kann beliebig angepasst werden.
Der Tooltipp läuft von links langsam rein und wird danach sofort ausgeblendet.


// Ein-/Ausblend-Effekte:
show: {
effect: 'slide',
delay: 500
},
hide: {
effect: 'none',
delay: 0
},

Schlie�en

Die Zeit kann beliebig angepasst werden.
Der Tooltipp läuft von oben langsam rein und wird danach sofort ausgeblendet.


// Ein-/Ausblend-Effekte:
show: {
effect: 'slideDown',
delay: 500
},
hide: {
effect: 'none',
delay: 0
},

Schlie�en

Die Zeit kann beliebig angepasst werden.
Der Tooltipp wird sofort eingeblendet und danach langsam wieder ausgeblendet.


// Ein-/Ausblend-Effekte:
show: {
effect: 'none',
delay: 0
},
hide: {
effect: 'fade',
delay: 500
},

Schlie�en

Die Zeit kann beliebig angepasst werden.
Der Tooltipp wird sofort eingeblendet und wird langsam nach links ausgeblendet.


// Ein-/Ausblend-Effekte:
show: {
effect: 'none',
delay: 0
},
hide: {
effect: 'slideUp',
delay: 500
},

Schlie�en

Die Zeit kann beliebig angepasst werden.
Der Tooltipp wird sofort eingeblendet und langsam nach oben ausgeblendet.


// Ein-/Ausblend-Effekte:
show: {
effect: 'none',
delay: 0
},
hide: {
effect: 'SlideDown',
delay: 500
},

Schlie�en

Hier müssen die Zeiten ohne Effekte auf Null gesetzt werden.
Der Tooltipp wird ohne Animation schnell ein- und ausgeblendet.


// Ein-/Ausblend-Effekte:
show: {
effect: 'none',
delay: 0
},
hide: {
effect: 'none',
delay: 0
},

Schlie�en

Infos über Tooltipps: Tooltipp-Infos auf Wikipedia

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

Wolfgang

Antworten

#5 | Professionelle Tooltipps mit "JQuery UI" und einstellbarer Tooltipp-Position datum

22.08.2015 20:17 (zuletzt bearbeitet: 14.09.2020 18:38)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3034
Punkte:	3678
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Board Nr:
Likes	906

Professionelle Tooltipps mit "JQuery UI" und einstellbarer Tooltipp-Position - Version 3.3
Aktualisiert 17.08.19

In bestimmten Fällen ist es notwendig die Position des angezeigten Tooltipps genauer zu positionieren.
Über die CSS ist dies nicht ohne weiteres möglich.
Ein zusätzlicher Eintrag im Skript macht es möglich!

Lösung:

Der folgende Eintrag wird im Skript unter "$(document).tooltip...." eingetragen.
Ist bereits oben in Beitrag #3 (Version 3.1)eingefügt.

1
2
3
 
// Position Tooltipp
position: { my: "left+8 top+30"},
 
 

Schlie�en

Bis dann und viel Spaß

Wolfgang

DJ-Frechdax findet das Top!

Antworten

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

28.08.2015 00:39 (zuletzt bearbeitet: 13.12.2021 15:55)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3034
Punkte:	3678
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Board Nr:
Likes	906

Professionelle Tooltipps mit "JQuery UI" - Weitere 13 neue Effekte! - Version 3.4
Aktualisiert 13.12.21

"JQuery UI" bietet außer "fade" und "slide" noch weitere 13 außergewöhnliche Effekte an. In bestimmte Foren sind auch diese Effekte einsetzbar.
Sie können wie auch "fade" und "slide" in Beitrag #4 unter "Ein-/ und Ausblend-Effekte" eingebaut werden. Welcher Effekt als Einblend-, welcher als Ausblend-Effekt und welche Zeit genommen wird, ist Geschmackssache und muss einfach ausprobiert werden!

1
2
3
4
5
6
7
8
9
 
// Ein-/Ausblend-Effekte:
show: {
effect: "slide",
delay: 300
},
hide: {
effect: "blind",
delay: 100
},
 

Folgende Effekte sind möglich:
"slide", "fade", blind", "bounce", "clip", "drop", "explode", "fold", "highlight", "puff", "pulsate", "scale", "shake", "size", "transfer".

Wie diese Effekte aussehen, kann man in dem folgenden Tool erkennen:

Schlie�en

Wolfgang

DJ-Frechdax findet das Top!

Antworten

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

18.08.2019 10:12 (zuletzt bearbeitet: 13.12.2021 16:07)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3034
Punkte:	3678
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Board Nr:
Likes	906

Flinke Tooltipps mit dem hauseigenen jQuery! - Version 4.1
Aktualisiert 13.12.21

Die Tooltipps mit "jQueryUI" haben viele Vorteile, aber auch einen gravierenden Nachteil: Die Ladezeit!
Verzichtet man auf die Vielzahl von möglichen Animationen und das Wechseln der Anzeigerichtung in den Randbereichen, dann ist das folgende, superflinke Skript bestens geeignet!
Auch in Span-Tags ( <span title='Tooptipp in span-Tags'>�</span> ) werden die Tooltipps richtig wiedergegeben!
Die Tooltipps sind frei formatierbar! In HTML-Scipten wird üblicherweise der HTML-Code zum Formatieren verwendet, in Forum-Beiträgen der BB-Code!

Vorteile der neuen flinken Tooltipps:

Die Tooltipps verzögern kaum merklich die Ladezeit der Webseite!
Es braucht kein zusätzliches "jQueryUI" geladen werden!
Es wird das hauseigene "jQuery" genutzt!
Funktioniert in allen Templates!
Die Tooltipps sehen in allen Browsern gleich aus!
Die Tooltipps sind über die "CSS" leicht formatierbar!
Es sind auch große formatierbare Informationsfenster möglich!
Die Tooltipps bewegen sich mit dem Mauszeiger!
Die Tooltipps können auch in Forum-Beiträgen eingerichtet werden und beliebig mit BB-Codes formatiert werden!
Jetzt auch in den Randbereichen gut einsetzbar!
Tooltipps lassen sich auch nach oben hin öffnen!

Installation - Template (v1-4)

Das gesamte Script kann in die Fußzeile oder als neues PI in den "bottom footer" eingetragen werden!
Das Business-Template wird nicht verändert!
In Zeile 2 kann das Aussehen des Tooltipps beliebig angepasst werden!
In Zeile 21+26 kann die Position des Tooltipps zum Mauszeiger eingestellt werden!
Die Bewertungsbutton werden nach dem neuen Update ohne Seiten-Reload aktualisiert, der Tooltipp benötigt zum Aktualisieren die Zeilen 7, 29 bis 31!
Wer keine Bewertungsbutton installiert hat, kann die Zeilen 7, 29 bis 31 löschen!
Zeile 22 bis 27 korrigieren bei langen Tooltipps den Abstand zum rechten Rand!
Zeile 3, 11+18 ermöglichen "cursor:pointer" und "text-decoration:underline" für Tooltipps in span-Tag

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

Hans58 findet das Top!

Antworten

#8 | Aktualisiert: Super finke Tooltipps mit Randbereichsfunktion! datum

23.08.2019 10:09 (zuletzt bearbeitet: 13.12.2021 16:10)

Aktualisiert: Super flinke Tooltipps mit Randbereichsfunktion! - Version 4.2

Vorher

Hinterher

Alle einfachen Tooltipps haben Schwierigkeiten mit den Randbereichen, wie auf dem Bild 1 zu sehen ist!
Das neue Skript wurde nur um wenige Zeilen erweitert und bleibt somit weiterhin recht klein!
Es wechselt nicht die Anzeigedarstellung von rechts nach links, wie mit den großen jQueryUI, sondern verhindert ein zusammendrücken und umbrechen der Tooltipps (siehe Bild 2)!
Bei großer Tooltipp-Darstellung besonders gut!
Zusätzlich wurde kleine Probleme, wie das Aufblitzen des alten Tooltipps beim Seiten-Reload und leere Tooltipps beim zu schnellen Überfahren behoben!
Tooltipps lassen sich jetzt auch nach oben hin öffnen!

Alles ist bereits in Beitrag #7 nachgetragen!

Viel Spaß und gutes Gelingen beim Nachbau!

Wolfgang

Hans58 findet das Top!

Antworten

#9 |

02.09.2019 08:48 (zuletzt bearbeitet: 13.12.2021 16:22)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3034
Punkte:	3678
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Board Nr:
Likes	906

Super flinke Tooltipps - Erweiterung Layout! - Version 4.3
Aktualisiert 13.12.21

Möchte man die Tooltipps aussagekräftiger machen, kann man eine zusätzliche Grafik hinzufügen!
Das kann wie folgt aussehen (Bitte mit der Maus über den Tooltipp fahren)!

Ein Info-Tooltipp:

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

  • 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

#10 | Tooltipps gezielt ausblenden! datum

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

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3034
Punkte:	3678
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Board Nr:
Likes	906

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

Bilder aus "Datei anhängen" mit einem Klick öffnen & schließen! - Für alle Templates! - Teil 1-4 � � "Wer ist Online? - Online-Zeitzähler" für alle Templates erweitern!

Seite 1 von 2 � Seite 1 2 Seite �

�hnliche Themen

Antworten

Letzter Beitrag

Sprechblasen fürs Forum - Teil 1+2
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 1 10.08.2022 18:49
Wolfgang • Zugriffe: 451
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: 2555
Super Kategorienauswahl für das Smiley-Menü - Version 1-3
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 4 16.10.2021 10:18
Wolfgang • Zugriffe: 2832
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: 905
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: 1211

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

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

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

21.09.2019 20:07
von

Wolfgang • Zugriffe: 14343

Die Top-Favoriten aus diesem Forum
Erstellt im Forum Alles, was noch so �brig bleibt von Wolfgang 1 01.07.2019 23:15
Wolfgang • Zugriffe: 18235

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 €

143%

Google Translator

Forum - Formatierbare Tooltipps oder Quickinfos - Version 1-5

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

Standardisierte Tooltipps für das Forum - Version 2Aktualisiert 12.12.21

Professionelle Tooltipps mit "JQuery UI" - Version 3.1Aktualisiert 12.12.21

Professionelle Tooltipps mit "JQuery UI" - mehr als 10 neue Effekte - Version 3.2Aktualisiert 13.12.21

Professionelle Tooltipps mit "JQuery UI" und einstellbarer Tooltipp-Position - Version 3.3Aktualisiert 17.08.19

Professionelle Tooltipps mit "JQuery UI" - Weitere 13 neue Effekte! - Version 3.4Aktualisiert 13.12.21

Flinke Tooltipps mit dem hauseigenen jQuery! - Version 4.1Aktualisiert 13.12.21

Aktualisiert: Super flinke Tooltipps mit Randbereichsfunktion! - Version 4.2

Super flinke Tooltipps - Erweiterung Layout! - Version 4.3Aktualisiert 13.12.21

Tooltipps gezielt ausblenden! - Alle VersionenAktualisiert 13.12.21

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

Standardisierte Tooltipps für das Forum - Version 2
Aktualisiert 12.12.21

Professionelle Tooltipps mit "JQuery UI" - Version 3.1
Aktualisiert 12.12.21

Professionelle Tooltipps mit "JQuery UI" - mehr als 10 neue Effekte - Version 3.2
Aktualisiert 13.12.21

Professionelle Tooltipps mit "JQuery UI" und einstellbarer Tooltipp-Position - Version 3.3
Aktualisiert 17.08.19

Professionelle Tooltipps mit "JQuery UI" - Weitere 13 neue Effekte! - Version 3.4
Aktualisiert 13.12.21

Flinke Tooltipps mit dem hauseigenen jQuery! - Version 4.1
Aktualisiert 13.12.21

Super flinke Tooltipps - Erweiterung Layout! - Version 4.3
Aktualisiert 13.12.21

Tooltipps gezielt ausblenden! - Alle Versionen
Aktualisiert 13.12.21