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 3 � Seite 1 2 3 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:	3012
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Board Nr:
Likes	870

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

Homepage:	Nicht angegeben
Board Nr:
Likes	870

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

Homepage:	Nicht angegeben
Board Nr:
Likes	870

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

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 3 � Seite 1 2 3 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: 430
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: 2495
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: 2792
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: 885
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: 1191

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

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

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

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

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 €

192%

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

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