Ich gehe jetzt mal davon aus, dass das nicht passieren sollte.

So wie ich gesehen habe, ist die Zeile

Hi Florian,
ich habe mir einen Wolf gesucht und an alles mögliche gedacht

Du hast recht, die Fehldarstellung verschwindet, wenn die gesamte Webadresse mit dem Tooltipp umschlossen wird.
So wie Du es unten im Beispiel gezeigt hast.

...

"text-decoration:none;" hatte ich eingesetzt, weil bei Links einmal der Unterstrich (für den Link) und die gepunktete Linie angezeigt wurde.
Mir war das zuviel.

Mit der korrekten Verschachtelung muste ich eine neue Zeile in die CSS einfügen.

.tooltip_text a {
text-decoration:none;
}

Gruß und Danke
Wolfgang

Hallo Florian,
mit den "Verbesserungen und Erweiterungen" der Browser scheint sich immer etwas zu ändern!

Mir ist aufgefallen, dass die Tooltipps bei mir im IE wunderbar laufen. In den anderen Browsern hingegen sind sie um hunderte von Pixel nach links und nach unten verschoben. In den Foren wird geschrieben das "document.body.scrollTop" nicht mehr richtig ausgeführt wird oder liegt es an "document.all"? Der Blinker wollte mit "document.all" auch nicht funktionieren, aber mit "document.getElementsByTagName('blink')" lief er wieder (siehe hier: http://www.hilfe-tricks-tipps.de/t71f17-...moeglichen.html)!

Interessanterweise scheinen in Deinem Forum die Abweichung nicht so extrem zu sein, wie bei mir zu sein???
Durch das Business-Template bin ich mit JQuery auf den Geschmack gekommen. Ich habe hier sehr gute Tooltipps gefunden, aber bis jetzt noch nichts nachvollziehen können. Viele Möglichkeiten werden nicht im Zusammenhang dargestellt, mit vielen Optionen und Variationen. Es wird hier schon einiges vorausgesetzt! Vielleicht liegt es ja auch an den Versionen von JQuery.

Bis dann

Hallo Wolfgang,
das document.all war eher eine Browser-Weiche um festzustellen, welche Funktionen unterstützt werden (nur alte oder auch neuere). Die Verschiebungen sind bei mir nicht so groß, da ich im bisherigen Tooltip-Skript die Werte für IE, Opera und andere Browser wie Firefox bereits nach Umstellung auf das Business-Template einmal angepasst habe.

Das Problem ist die veränderte Verschachtelung der HTML-Elemente im Gegensatz zum Standard-Template. Ein Text mit Tooltip findet sich in vielen unterschiedlich positionierten Elementen (absolut, relativ, …) und die Position kann nicht direkt angegeben werden. Im Standard-Template konnte das dennoch mit einem geeigneten Versatz in Pixeln korrigiert werden. Danach wird ein absoluter Wert gebraucht, welcher denn Tooltip dann korrekt positioniert (Evtl. unter Berücksichtigung der Scroll-Position).
jQuery müsste die Postion aber nach den übergeordneten Elementen berechnen. Also vereinfacht z.B. die Text-Position im Beitrags-Container, dessen Position in der Flat-Ansicht des Threads und dann erst der Versatz zum Body. D.h. also, dass jQuery die genaue Position durch Prüfung der einzelnen Positionen in der Verschachtelung herausfindet.

Zusätzlich reagieren die Ausgaben von JS-Anweisungen wie scrollTop in unterschiedlichen Browsern auch noch etwas anders. Also selbst wenn man ein Skript schreibt, welches eben die Struktur komplett durchläuft, muss man evtl. auf Browser-Unterschiede achten. jQuery hat da glaube ich Anweisungen, welche in allen Browsern das gleiche Ergebnis liefern, diese habe ich jetzt spontan aber nicht mehr gefunden.

In Verbindung mit jQuery finde ich ja aber immer jQueryUI ganz gut, vieles lässt sich bereits damit abdecken ohne nochmals eine weitere Bibliothek zu benötigen. Andere Bibliotheken haben manchmal vielleicht ausgereifte Effekte für eine bestimmte Aktion, aber jQueryUI bietet für vieles gleichzeitig eine gute Basis und ist mit einer kleinen Anpassung an eigene Bedürfnisse die optimale Wahl. Praktischerweise ist dort bereits eine Funktionalität für jQueryUI-Tooltips vorhanden. Mit kleinen Anpassungen ist es sogar möglich, die alten Tooltips im Forum weiterhin zu unterstützen, die Foren-Codes müssen also nicht zwangsläufig abgeändert werden und es entfällt das Problem, dass alte Tooltips anders als neue aussehen bzw. positioniert sind.

onMouseOver="tooltip_open(tip)"
onMouseOut="tooltip_close()"
 

Diese Event-Handler kannst du nun auch bedenkenlos aus den BBCodes entfernen, da sie nicht mehr gebraucht werden. Aber was ist mit den Beiträgen, in welchen noch die alten Tooltips verwendet werden? Diese würden beim Überfahren mit der Maus dann unbekannte Funktionen aufrufen. Die Lösung ist aber relativ einfach: Leere den Inhalt der betreffenden Funktionen. Sie können dann immer noch bei alten Tooltips aufgerufen werden, haben aber keinen Inhalt mehr, der das neue Skript stören könnte.

Um etwas konkreter zu werden, zeige ich mal kurz, wie das alte Skript reduziert werden kann.

Der folgende Block kann komplett entfernt werden:

var ttip = null;
function ttip_position(e) {
	[…]
}
ttip_text = null;
ttip_breite_anfang = 0;
 

Diese Funktionen werden sicherheitshalber noch beibehalten, aber eben geleert um nicht zu stören:

function tooltip_open(tip) {}
function tooltip_close() {}
 

Beachte aber, ggf. die Funktion tooltip_insert() nicht aus Versehen zu entfernen. Sie ist bei mir noch dafür verantwortlich, den BBCode über die Symbolbar und spezielle Abfragen nach Text, URL und Tooltip in den Beitrag einzufügen.

Wow!
Absolute Klasse!

Kleiner Nachteil:
Sehr große CSS!
Die Tooltipps ruckeln etwas (liegt das an JQuery oder an der großen CSS?).
Ich habe schon mal versucht, nur die nötigsten CSS-Angaben herauszusuchen. Sehr mühselig.

Besten Dank

Hallo Florian,
ich habe schon einiges gefunden.
Geniales Script! Wenn Tooltipps in den Randbereich gelangen, werden sie super umgesetzt!

Die mitgelieferte CSS ist riesig groß und wahrscheinlich für alle Demos gedacht.
Ich habe die Einträge herausgesucht, die nur für die Tooltipps im Forum notwendig sind.

Hallo Wolfgang,
die mitgelieferte CSS ist so groß, damit alle von jQueryUI mitgelieferten Möglichkeiten korrekt gestylt werden können. Die Bibliothek bietet natürlich weit mehr Möglichkeiten als nur die Tooltips. Theoretisch könntest du auch aus der JS-Datei von jQueryUI nur die benötigten Elemente verwenden. Aber das wäre wie bei der CSS-Datei sehr umständlich.

Immerhin hast du noch herausgefunden, wie das Ruckeln vermindert werden kann. Womöglich lag es weniger an der CSS direkt, als mehr am Skript, welches durch die Ausführung anderer JavaScripts dann letztlich die CSS-Änderungen nur allmählich vornehmen konnte. Ich persönlich finde ja die Einblendung ohne spezielle Effekte auch ganz hübsch, es sieht dann leicht nach FadeIn und -Out aus.

Auf jeden Fall sieht dein Tooltip richtig top aus.

Hallo Florian,
ich muss sagen, dass Fade-in/out würde ich auch kürzer haben wollen. Besonders das Fade-Out könnte gleich null sein !!! Wo kann ich die Zeiten verändern. Habe es bis jetzt nicht gefunden.
Mit den Werten "slideDown" und "blind" kann man Ansprechzeit und Haltezeit einstellen (IE), nicht unbedingt das "Faden".
Beweis: Selbst wenn man die Werte auf Null setzt, bleibt das Verhalten von Fade in/out gleich.

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

Hallo Wolfgang,
streng genommen dürftest du mit den Slide-Effekten keine Fade-Animationen zu sehen bekommen. Du kannst im Moment also nur die Slide-Animation verkürzen.
Das blind könntest du übrigens auch noch durch slideUp austauschen, macht in Verbindung mit slideDown eigentlich mehr Sinn. Optisch konnte ich keinen Unterschied feststellen.

Nur wenn du die Blöcke von show und hide entfernst, wird die Standard-Animation (müsste fade sein) verwendet. Ansonsten wir diese komplett ersetzt.
Setze sie jeweils auf null, um die Animationen komplett zu deaktivieren, Tooltips werden dann sofort hart eingeblendet und verschwinden auch augenblicklich.

Wenn du mal gezielt nur einen Fade-Effekt probieren möchtest, ersetzt du einfach die Slides durch Fades:

show: {
	effect: 'fade',
	delay: 50
},
hide: {
	effect: 'fade',
	delay: 50
},
 

Damit hast du auch die zeitliche Kontrolle über das richtige Faden. Andere Animationen sind dann sonst aber nicht mehr auf dem Tooltip.

show: null,
hide: { delay: 1 },	// nötig, damit close funktioniert
open: function(event, ui) {
	var tooltipHeight = ui.tooltip.css('height');
	ui.tooltip.stop(true, true)
	.css('opacity', 0).css('height', '0px')
	.animate(
		{
			opacity: 1,
			height: tooltipHeight
		},
		300
	);
},
close: function(event, ui) {
	ui.tooltip.stop(true, true)
	.animate(
		{
			opacity: 0.0,
			height: '0px'
		},
		{
			duration: 300,
			complete: function(){
				$(this).remove();
			}
		}
	);
},
 

Perfekt!!!

Hey Florian,
ich bin begeistert, was so in JQuery steckt.

Ich habe die Effekte für "Show" mit "slide", slideDown, fade, fadeDown, Standard (leichtes fade-in/out) und Dein Script (slide-in /fade-out) ausprobiert. Alle wirklich klasse!
Alle Effekte kann man auch für "hide", fürs Ausblenden benutzen.

Ich habe mich dafür entschieden, den Tooltext verzögert, aber animiert (Favorit: slideDown) einzublenden und schnell wieder auszublenden. Man kann mit JQuery wirklich alles umsetzen. Ich habe etwas probiert und folgende, perfekte Einstellung für mich gefunden!!!
Würde man für den Ausblend-Effekt nichts eintragen, wird (wie Du sagst) der Standard aktiv. Deswegen "none". Das gleich gilt für die Zeit "delay" (Standard ca. 50).

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

Bis dann und besten Dank.
Macht echt Spaß auf Entdeckungstour zu gehen (mit Deiner Hilfe).


Bis dann und viele Grüße aus Hannover
Wolfgang

Hallo Wolfgang und Florian, ich habe das hier Intensiv Verfolgt. Der Tooltip ist mal Richtig genial. Nur ich bekomme das bei mir nicht Hin. Habe es Mehrfach versucht aber Irgendwas mache ich da wohl nicht Richtig.

Ich verstehe z.b. nicht wie ich den Code (Ersetze....mit....) Einsetzen muß.

Könnt ihr mir das noch mal Erklären wie ich wo was einfügen muß?

Wolfgang auch mit deinen Tips in deinen Forum komme ich nicht weiter.

Ach ich möchte es bei meinen Foren Nutzen beide Business Templates.

Allerdings bin ich wohl ein wenig zu "Doof" dafür darum die bitte nach einer Punkt für Punkt Erklärung.

Hallo Mario,
ich werde versuchen, nochmals den letzten Stand des Skriptes zusammenzutragen.


Zuerst werden die nötigen Styles und Skripte verfügbar gemacht. Bei den meisten Nutzern empfiehlt es sich, die Änderungen einfach direkt ins Template einzutragen. Erfahrene Nutzer können die direkten Template-Änderungen gerne mit globalen Variablen reduzieren, die nötigen Änderungen sollte man dann aber selbst problemlos durchführen können.

Ansonsten bleiben wir bei dem direkten Einfügen ins Template, dazu wird das Element Obere Leiste editiert:
Admin-Bereich -> Template Entwicklung -> [edit] -> Obere Leiste

Dort suchen wir als erstes die Stelle, an der jQuery eingebunden wird (Versionsnummer ggf. abweichend):

<script type="text/javascript" src="http://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script>
 

Im Template ist statt dem Link evtl. nur eine Variable eingetragen, dann sieht die Stelle in etwa so aus:

<script type="text/javascript" src="{{link_jquery}}"></script>
 

Nach entsprechender Zeile fügen wir nun jQueryUI hinzu:

<!-- jQueryUI-Theme -->
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<!-- jQueryUI-Skript -->
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
 

<!-- Style für Tooltips -->
<style type="text/css">
	/* Tooltip-Container nicht
	   in Text anzeigen */
	.tooltip {
		display:none;
	}
	/* Hilfe-Cursor und Unterstreichen
	   von Text mit Tooltip */
	.tooltip_text, .tooltip_text a {
		cursor: help;
		border-bottom: 1px dotted;
	}
	/* GoogleMap in Tooltip */
	.map {
		width: 350px;
		height: 350px;
	}
	/* maximale Tooltip-Breite */
	.ui-tooltip {
		max-width: 350px;
	}
</style>
 

<!-- Tooltips über Symbolbar einfügen -->
<script type="text/javascript">
 
	/* Folgende zwei Funktionen nur einkommentieren,
	   wenn bereits Beiträge mit Tooltips existieren */
	// function tooltip_open(tip) {}
	// function tooltip_close() {}
 
	// Tooltip-Abfrage für die Symbol-Bar
	function tooltip_insert() {
		Check = confirm(unescape("Soll ein Link mit Tooltip eingef%FCgt werden?\nBei Abbrechen wird der Text nicht verlinkt."));
		if(Check == false){
			tooltip_text = prompt(unescape("Der Text, %FCber dem der Tooltip angezeigt wird:", ""));
			tooltip_info = prompt(unescape("Text im Tooltip\nHinweis: Der Text kann nachtr%E4glich noch formatiert werden!", ""));
			var tooltip_tags = '[tipp]'+tooltip_text+'[info]'+tooltip_info+'[/tipp]';
			returnTag(tooltip_tags);
		}
		else{
			url_link = prompt("Link-Adresse:", "http://");
			tooltip_text = prompt(unescape("Der Text, %FCber dem der Tooltip angezeigt wird:", ""));
			tooltip_info = prompt(unescape("Text im Tooltip\nHinweis: Der Text kann nachtr%E4glich noch formatiert werden!", ""));
			var tooltip_tags = '[tipp]'+'[url='+url_link+']'+tooltip_text+'[/url]'+'[info]'+tooltip_info+'[/tipp]';
			returnTag(tooltip_tags);
		}
	}
 
</script>
 
<!-- Tooltips einblenden -->
<script type="text/javascript">
	$(document).ready(function(){
		$(document).tooltip({
			// Maus folgen:
			track: true,
			// Angewendete Elemente (CSS-Selektoren):
			items: 'img, [data-geo], [title], .tooltip_text',
			// Ein-/Ausblend-Effekte:
			show: null,
			hide: { delay: 1 },	// nötig, damit close funktioniert
			open: function(event, ui) {
				var tooltipHeight = ui.tooltip.css('height');
				ui.tooltip.stop(true, true)
				.css('opacity', 0).css('height', '0px')
				.animate(
					{
						opacity: 1,
						height: tooltipHeight
					},
					100
				);
			},
			close: function(event, ui) {
				ui.tooltip.stop(true, true)
				.animate(
					{
						opacity: 0.0,
						height: '0px'
					},
					{
						duration: 100,
						complete: function(){
							$(this).remove();
						}
					}
				);
			},
			// 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();
				}
 
				// weitere jQueryUI-Tooltips aus Beispiel:
				if (element.is('[data-geo]')) {
					var text = element.text();
					return '<img class="map" alt="' + text +
						'" src="http://maps.google.com/maps/api/staticmap?' +
						'zoom=11&size=350x350&maptype=terrain&sensor=false&center=' +
						text + '">';
				}
				if (element.is('[title]')) {
					return element.attr('title');
				}
				if (element.is('img')) {
					return element.attr('alt');
				}
			}
		});
	});
</script>
 

[tipp]{{text}} … [info]{{tipp}}[/tipp]
 

Bei Mit steht dann der entsprechende HTML-Code:

<span class="tooltip_text"> … <span class="tooltip">{{tipp}}</span></span>
 

Hinweis: Wenn bereits die alte Version der Tooltips verwendet wurde, enthält der HTML-Code wahrscheinlich noch die Attribute onMouseOver und onMouseOut sowie ein IMG-Tag im Tooltip-Container. Der alte BBCode kann problemlos beibehalten werden. Allerdings sollten im obigen Skript dann die Kommentar-Zeichen vor den leeren Funktionen tooltip_open() und tooltip_close() herausgenommen werden. Sonst gibt es fehlerhafte Funktionsaufrufe beim Überfahren des Tooltip-Textes mit der Maus.

Als JS-Funktion wird dann noch tooltip_insert(); eigetragen, damit aus der Symbolbar auch die Abfrage nach den Texten aufgerufen wird.

Sorry Florian ich habe nicht bedacht zu Erwähnen das ich mein Templates Original habe und es nicht Verändern möchte. Hätte ich auch selber dran Denken können das zu schreiben. Also wenn es eine Möglichkeit gibt das Ohne eingriff zu machen dann würde ich mich Freuen. Wenn es nur mit den Eingriff ins Templates Geht dann möchte ich es nicht einfügen.
Bisher habe ich alles was ich Optisch geändert habe per CSS und HTNL über Kopfzeile CSS oder eben Codes gemacht. Und das möchte ich eigentlich so bei behalten.

Sorry das ich nicht darauf hingewiesen habe.

Hallo Mario,
theoretisch müsste es auch in der Kopfzeile funktionieren. Die sieht dann bestimmt ziemlich voll aus.

Unter Layout -> Farben & Einstellungen -> CSS gibt es übrigens die Möglichkeit, die CSS-Datei des Forums mit eigenen Style-Regeln zu ergänzen. Damit würde die Kopfzeile zumindest nicht mit allzu viel CSS-Regeln überladen.

Solche Änderungen finden sonst oft im Template statt, da Skripte und Styles normalerweise zwischen den Head-Tags im HTML-Code definiert und im Body dann einfach nur noch verwendet werden. Dies soll für eine bessere Strukturierung sorgen.

Nabend Florian, Danke erst mal für die Hilfe. Ich habe das nun mal Versucht in Layout/Kopfzeile einzufügen.

Eingesetzt habe ich da folgendes

<!-- jQueryUI-Theme -->
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/...s/jquery-ui.css">
<!-- jQueryUI-Skript -->
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

<!-- Style für Tooltips -->
<style type="text/css">
/* Tooltip-Container nicht
in Text anzeigen */
.tooltip {
display:none;
}
/* Hilfe-Cursor und Unterstreichen
von Text mit Tooltip */
.tooltip_text, .tooltip_text a {
cursor: help;
border-bottom: 1px dotted;
}
/* GoogleMap in Tooltip */
.map {
width: 350px;
height: 350px;
}
/* maximale Tooltip-Breite */
.ui-tooltip {
max-width: 350px;
}
</style>


<!-- Tooltips über Symbolbar einfügen -->
<script type="text/javascript">

/* Folgende zwei Funktionen nur einkommentieren,
wenn bereits Beiträge mit Tooltips existieren */
// function tooltip_open(tip) {}
// function tooltip_close() {}

// Tooltip-Abfrage für die Symbol-Bar
function tooltip_insert() {
Check = confirm(unescape("Soll ein Link mit Tooltip eingef%FCgt werden?\nBei Abbrechen wird der Text nicht verlinkt."));
if(Check == false){
tooltip_text = prompt(unescape("Der Text, %FCber dem der Tooltip angezeigt wird:", ""));
tooltip_info = prompt(unescape("Text im Tooltip\nHinweis: Der Text kann nachtr%E4glich noch formatiert werden!", ""));
var tooltip_tags = ''+tooltip_text+' '+tooltip_info+'';
returnTag(tooltip_tags);
}
else{
url_link = prompt("Link-Adresse:", "http://");
tooltip_text = prompt(unescape("Der Text, %FCber dem der Tooltip angezeigt wird:", ""));
tooltip_info = prompt(unescape("Text im Tooltip\nHinweis: Der Text kann nachtr%E4glich noch formatiert werden!", ""));
var tooltip_tags = ''+'[url='+url_link+']'+tooltip_text+'[/url]'+' '+tooltip_info+'';
returnTag(tooltip_tags);
}
}

</script>

<!-- Tooltips einblenden -->
<script type="text/javascript">
$(document).ready(function(){
$(document).tooltip({
// Maus folgen:
track: true,
// Angewendete Elemente (CSS-Selektoren):
items: 'img, [data-geo], [title], .tooltip_text',
// Ein-/Ausblend-Effekte:
show: null,
hide: { delay: 1 }, // nötig, damit close funktioniert
open: function(event, ui) {
var tooltipHeight = ui.tooltip.css('height');
ui.tooltip.stop(true, true)
.css('opacity', 0).css('height', '0px')
.animate(
{
opacity: 1,
height: tooltipHeight
},
100
);
},
close: function(event, ui) {
ui.tooltip.stop(true, true)
.animate(
{
opacity: 0.0,
height: '0px'
},
{
duration: 100,
complete: function(){
$(this).remove();
}
}
);
},
// 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();
}

// weitere jQueryUI-Tooltips aus Beispiel:
if (element.is('[data-geo]')) {
var text = element.text();
return '<img class="map" alt="' + text +
'" src="http://maps.google.com/maps/api/staticmap?' +
'zoom=11&size=350x350&maptype=terrain&sensor=false&center=' +
text + '">';
}
if (element.is('[title]')) {
return element.attr('title');
}
if (element.is('img')) {
return element.attr('alt');
}
}
});
});
</script>

Gehe ich nun auf Vorschau sehe ich das



Gehe ich nun mit der Maus Drüber erscheint Folgendes



Nun kann ich dort noch den Text eingeben und dann schaut es genauso aus wie es soll

Hallo, nun hat sich noch ein Fehler aufgetan. Und zwar wenn ich das Script in der Kopfzeile habe

<!-- jQueryUI-Theme -->
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<!-- jQueryUI-Skript -->
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
 
<!-- Style für Tooltips -->
<style type="text/css">
	/* Tooltip-Container nicht
	   in Text anzeigen */
	.tooltip {
		display:none;
	}
	/* Hilfe-Cursor und Unterstreichen
	   von Text mit Tooltip */
	.tooltip_text, .tooltip_text a {
		cursor: help;
		border-bottom: 1px dotted;
	}
	/* GoogleMap in Tooltip */
	.map {
		width: 350px;
		height: 350px;
	}
	/* maximale Tooltip-Breite */
	.ui-tooltip {
		max-width: 350px;
	}
</style>
 
 
<!-- Tooltips über Symbolbar einfügen -->
<script type="text/javascript">
 
	/* Folgende zwei Funktionen nur einkommentieren,
	   wenn bereits Beiträge mit Tooltips existieren */
	// function tooltip_open(tip) {}
	// function tooltip_close() {}
 
	// Tooltip-Abfrage für die Symbol-Bar
	function tooltip_insert() {
		Check = confirm(unescape("Soll ein Link mit Tooltip eingef%FCgt werden?\nBei Abbrechen wird der Text nicht verlinkt."));
		if(Check == false){
			tooltip_text = prompt(unescape("Der Text, %FCber dem der Tooltip angezeigt wird:", ""));
			tooltip_info = prompt(unescape("Text im Tooltip\nHinweis: Der Text kann nachtr%E4glich noch formatiert werden!", ""));
			var tooltip_tags = '[tipp]'+tooltip_text+'[info]'+tooltip_info+'[/tipp]';
			returnTag(tooltip_tags);
		}
		else{
			url_link = prompt("Link-Adresse:", "http://");
			tooltip_text = prompt(unescape("Der Text, %FCber dem der Tooltip angezeigt wird:", ""));
			tooltip_info = prompt(unescape("Text im Tooltip\nHinweis: Der Text kann nachtr%E4glich noch formatiert werden!", ""));
			var tooltip_tags = '[tipp]'+'[url='+url_link+']'+tooltip_text+'[/url]'+'[info]'+tooltip_info+'[/tipp]';
			returnTag(tooltip_tags);
		}
	}
 
</script>
 
<!-- Tooltips einblenden -->
<script type="text/javascript">
	$(document).ready(function(){
		$(document).tooltip({
			// Maus folgen:
			track: true,
			// Angewendete Elemente (CSS-Selektoren):
			items: 'img, [data-geo], [title], .tooltip_text',
			// Ein-/Ausblend-Effekte:
			show: null,
			hide: { delay: 1 },	// nötig, damit close funktioniert
			open: function(event, ui) {
				var tooltipHeight = ui.tooltip.css('height');
				ui.tooltip.stop(true, true)
				.css('opacity', 0).css('height', '0px')
				.animate(
					{
						opacity: 1,
						height: tooltipHeight
					},
					100
				);
			},
			close: function(event, ui) {
				ui.tooltip.stop(true, true)
				.animate(
					{
						opacity: 0.0,
						height: '0px'
					},
					{
						duration: 100,
						complete: function(){
							$(this).remove();
						}
					}
				);
			},
			// 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();
				}
 
				// weitere jQueryUI-Tooltips aus Beispiel:
				if (element.is('[data-geo]')) {
					var text = element.text();
					return '<img class="map" alt="' + text +
						'" src="http://maps.google.com/maps/api/staticmap?' +
						'zoom=11&size=350x350&maptype=terrain&sensor=false&center=' +
						text + '">';
				}
				if (element.is('[title]')) {
					return element.attr('title');
				}
				if (element.is('img')) {
					return element.attr('alt');
				}
			}
		});
	});
</script>
 

 

Hallo Mario,
du könntest es einfassen, indem du den um den ganzen Block HTML-Kommentare schreibst:

<!-- jQuery-Tooltips -->
[… Skripte …]
<!-- /jQuery-Tooltips -->
 

Die jQueryUI-Teile, also Theme und Skript, sollten nicht davon eingerahmt werden, da du sie irgendwann mal wieder für andere Erweiterungen benötigen könntest und diese dann in dem Tooltip-Block evtl. untergehen würden.


Du siehst den Tooltip in der Vorschau übrigens nur, weil dort das Skript und die Styles in der Iconbar eingebunden werden und damit die Tooltips aktiv sind. Nachdem der Beitrag gespeichert ist, wird die Iconbar nicht mehr eingebunden und damit sind die Tooltips auch nicht mehr verfügbar. Da im Block ebenfalls die Styles eingebettet sind, wird der Tooltip-Text auch nicht mehr wie gewünscht ausgeblendet und erst bei Bedarf, sondern sofort und direkt im Beitrag angezeigt.

Bei der vorigen Variante, mit dem Problem der Smileys, wurde evtl. ein Tooltip eingeblendet, während du mit der Maus über das Fenster fährst. Dadurch befindet sich die Maus dann plötzlich über dem Tooltip und nicht mehr über dem Smiley-Fenster. Sobald das Smiley-Fenster verlassen wird, schließt es sich in der Regel. Das könnte das Problem erklären. Ansonsten stochere ich da aber im Dunkeln. Ich drücke dir dennoch die Daumen, dass du den Fehler finden kannst.

Danke für den Tip mit der Einfassung.

Ja ich habe auch keine Ahnung woran der Fehler liegt. Habe nun so Viel Getestet. Das Problem ist das ich wenn ich mit der Maus sehr Langsam im Smileys Fenster zum Smileys gehe kann ich den Auswählen. gehe ich zu schnell durch das Fenster geht es zu. Verrückte Sache und ich habe null Plan wie ich das Umgehen kann.

Mir ist noch aufgefallen das wenn ich das Script in Der Kopfzeile habe einige Sachen angezeigt werden die beim Kopfzeile Ohne Script nicht so angezeigt werden

Kann mir jemand sagen warum es so ist?



Das immer dann wenn ich mit der Maus auf den Entsprechenden Icon Gehe ohne zu Klicken.

Haben deine Smileys denn das title- oder altAttribut? Dann besteht zumindest die Möglichkeit, dass ein Tooltip angezeigt werden kann. Würde aber bedeuten, dass dieser beim Treffen eines Smileys sofort aufploppt und dadurch das Smiley-Fenster den Fokus verliert.

Du kannst zum Test mal das title mit den eckigen Klammern aus folgender Zeile entfernen:

items: 'img, [data-geo], [title], .tooltip_text',
 

Danach auch noch die bedingte Anweisung:

if (element.is('[title]')) {
	return element.attr('title');
}
 

Falls es dann immer noch nicht ganz klappt, versucht du die beiden Schritte nochmal zusätzlich mit img durchzuführen.

Wenn das Smiley-Fenster danach ohne Probleme funktioniert bedeutet das, es darf nicht den Fokus verlieren, damit es sich nicht schließt. Entweder verzichtest du dann auf Tooltips bei Bildern (IMG-Tags) oder Elementen mit title-Attribut (je nach Testergebnis evtl. auch beides), oder du brauchst einen neuen Selektor, welcher sozusagen alle Bilder und title-Elemente anspricht, außer die in der Symbolbar.

Hallo Florian, danke für den Tip aber das Entfernen bewirkt nur das der Tooltip (Fenster) nicht mehr auf geht. Ich sehe zwar das Kleine ? aber das Fenster mit dem Tip bleibt geschlossen.

Den Rest den du im Post Oben Erklärst habe ich nicht versucht weil ich nicht genau weiß wie du das meinst.
Ich denke ich werde vorerst auf den Tooltip Verzichten. Hoffnung habe ich ja das es so etwas mal als Plugin gibt. Denn Tooltips Nutzen die im Support ja auch zum Teil.
Ich bin einfach nicht Fit genug in HTML & Co und bin somit leider auf die Hilfe von anderen angewiesen. Und da ich Zeitlich zu sehr eingeschränkt bin auch noch HTML&Co zu lernen werde ich drauf Verzichten auch wenn es schwer Fällt weil eben ein Geniales Feature.