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

So wie ich gesehen habe, ist die Zeile

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.

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 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();
			}
		}
	);
},
 

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.

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.

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.

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.