Hallo Mario,
theoretisch müssten die Tooltipps über Elementen mit der CSS-Klasse tooltip_text noch funktionieren. Das sind letztlich die Tooltips, welche per BBCode in Beiträgen erzeugt werden können.

Hier nochmal das Skript nach entfernen der von mir gemeinten Teile:

<!-- Tooltips einblenden -->
<script type="text/javascript">
	$(document).ready(function(){
		$(document).tooltip({
			// Maus folgen:
			track: true,
			// Angewendete Elemente (CSS-Selektoren):
 
// Änderung hier …
			items: '[data-geo], .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 + '">';
				}
 
// … und nochmals hier
 
			}
		});
	});
</script>
 

items: 'div:not(.xob_iconlist) img, [data-geo], div:not(.xob_iconlist) [title], .tooltip_text',
 

Das sollte dafür sorgen, die Tooltips weiterhin auf allen IMG-Tags und Elementen mit title-Attribut anzuzeigen, mit Ausnahme von Elementen in der Symbolbar. Wenn dadurch dann die Tooltips im Smiley-Fenster deaktiviert wurden, sollte es wieder ohne Probleme funktionieren.

Hallo Mario,
den Chat könnte ich jetzt sowieso nicht mehr testen. Evtl. kann dir jemand dabei helfen, ebenso wie die Symbolbar den Chat von den Tooltips zu befreien.

Eine relativ einfach gehaltene Tooltip-Variante, dafür aber schnell und ohne zusätzliche Skripts, bietet die Style-Bibliothek Hint.css.

Eine kleine Einführung dazu gibt es unter Creating Animated Tooltip Easily with Hint.css.

Hallo Wolfgang,

ich vermute mal, dass dein Hauptproblem das fehlende title-Attribut in der alten Tooltip-Struktur war, welches für die neuen Tooltips ausgelesen wird. Dadurch war bei den alten this.title leer, sodass kein Inhalt für den Tooltip gesetzt wurde. Außerdem hattest du den Headbereich inkl. Doctype doppelt hintereinander stehen.


Bei den vielen Anpassungen im Laufe der Zeit ist es schwierig, auf die Schnelle wieder einen Überblick zu bekommen. Theoretisch könntest du auch für beide Tooltips zwei passende eigene Skripte verwenden. Im nachfolgenden Skript habe ich es nun so versucht, dass ein Skript und ein Style weitestgehend für beide Tooltips verwendet werden können. Die Unterschiede werden in den IF-Bedingungen abgehandelt.

Wenn es sich um einen neuen Tooltip handelt, wird dessen Container aus dem title-Attribut neu generiert. Die Variable title wird auch nur dazu gebraucht, um das Attribut vorübergehend leeren zu können, damit nicht der browsereigene Tooltip zusätzlich angezeigt wird. Danach wird mithilfe der Variablen der Inhalt nach Verlassen mit der Maus wiederhergestellt.

Im Falle eines alten Tooltips wird dessen Inhalt kopiert und (wie auch der neu generierte Inhalt aus der anderen Version) am Ende in die Seite eingehängt. Damit kann das Einblenden, Verschieben und Entfernen bei beiden Varianten gleich abgehandelt werden.

Die neue Variante braucht eigentlich keine extra Klasse mehr, da sie auf alle Elemente mit title-Attribut angewendet werden kann. Somit kannst du alles mögliche mit Tooltips ausstatten. Natürlich kannst du auch wieder eine extra Klasse einführen, um damit die Ausführung und den Tooltip-Style auf einige bestimmte Elemente einzuschränken.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tooltipp mit jQuery</title>
 
<style>
	/* Foren-Tooltipp Thread Flat */
	.tooltip {
		display:   none;
		max-width: 700px;
	}
	[title], .tooltip_text {
		position:      relative;
		border-bottom: 1px dotted blue;
	}
	[title] a, .tooltip_text a {
		cursor:          pointer;
		text-decoration: none;
	}
 
	/* jQuery-Tooltipp */
	.tooltip {
		display:       none;
		position:      absolute;
		padding:       3px 5px 3px 5px;
		color:         #0000aa;
		font-size:     13px;
		z-index:       1000;
 
		background-color: #ffffff;
		border:           2px solid #A2A2A2;
		border-radius:    8px;
		box-shadow:       3px 3px 6px #aaaaaa;
	}
	.tooltip > img:first-child {
		position: absolute;
		width:    30px;
		left:    -21px;
		top:      -3px;
		border:    0;
	}
</style>
 
<script src="http://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script>
<script>
	$(document).ready(function(){
		var offset = {
				x: 20,
				y: 10
			},
			tooltip = null,
			// Neue oder alte Struktur für Tooltip:
			newTooltip = false,
			// Titel für neue Tooltips zwischenspeichern:
			title  = '';
 
		$('[title], .tooltip_text').hover(
			function(e){
				newTooltip = !$(this).hasClass('tooltip_text');
 
				if (newTooltip) {
					// Erzeuge Tooltip-Inhalt aus "title"-Attribut:
					title = $(this).attr('title');
					$(this).attr('title', '');
 
					tooltip = $('<div>')
						.attr('class', 'tooltip')
						.text(title);
				}
				else {
					// Kopiere Tooltip-Inhalt aus alter Vorgabe:
					tooltip = $(this).find('.tooltip').clone();
				}
 
				tooltip.delay(100).fadeIn(200)
				$('body').append(tooltip);
 
				$(this).mousemove(function(e){
					tooltip.css({
						left: (e.pageX + offset.x) + 'px',
						top:  (e.pageY + offset.y) + 'px'
					});
				});
			},
			function(){
				if (newTooltip) {
					$(this).attr('title', title);
				}
				tooltip.remove();
			}
		);
	});
</script>
 
</head>
<body>
 
	<!-- Aufbau Foren-Tooltipp -->
	<span class="tooltip_text">
		Tooltipps ohne "jQueryUI"
		<span class="tooltip">
			<img src="http://www.bilder-hochladen.net/files/1tys-r2-c4b3.png" />
			TEXT TEXT TEXT
		</span>
	</span>
 
	<br /><br />
 
	<!-- Tooltipps mit "title" -->
	<span title="Tooltipps ohne 'jQueryUI'">Tooltipps für "title"-Attribut </span>
 
</body>
</html>
 

Also in einem Editor, welcher korrekt Dateien mit UTF-8 laden kann und diese auch wieder so speichert, habe ich mit dem kurzen Meta-Tag keine Probleme. In den Foren wird leider häufig eine ISO-8859-1(5) oder windows-1252 verwendet, was besonders bei eigenen Ajax-Requests Probleme macht, da diese nur in UTF-8 versendet werden, selbst wenn man dies mit speziellen Headern zum Setzen der Codierung anpassen möchte. Aber das ist ein anderes Thema.

Ein Leerzeichen in a [title] würde nicht funktionieren, da sonst innerhalb eines Ankers nach einem beliebigen Kindknoten mit title-Attribut gesucht werden würde. Leerstellen sind wie auch Pfeilspitzen Kombinatoren und wählen Nachfahren bzw. Kindknoten aus. Direkt aneinandergeschrieben bedeutet das aber, ein Anker, welcher selbst ein title-Tag besitzt. Und eine Reihenfolge in der Syntax ist eben auch wichtig, sonst würde aus einem Anker mit Klasse .tooltip_text (also a.tooltip_text) plötzlich ein beliebiges Element mit der Klasse .tooltip_texta, welche eben nirgendwo so gesetzt wurde.


Um vom Rand wegzukommen, kannst du vor dem Setzen mittels .css({ … }) evtl. prüfen, ob e.pageX + offset.x größer als die Breite der gesamten Seite ist. Falls ja, nimmst du ein anderes .css({ … }) mit Werten für left, welche der Seitenbreite minus tooltip.width() entspechen. Welche CSS-Eigenschaften du setzst, kannst du wie gewohnt mittels IFs steuern, bei der Höhe wird analog ggf. die tooltip.height() von der Viewport-Höhe abgezogen.


Die Skripte jetzt wieder zu trennen, wo sie weitestgehend die gleiche Basis bzw. Logik teilen, macht denke ich keinen Sinn mehr. Ist mir aktuell auch zu zeitraubend, nochmals das ganze Skript neu einzurücken, dann wieder zu analysieren und ggf. nochmals umzuschreiben. Vorher hättest du mit der Trennung zwei verschiedene Logiken unabhängig voneinander aktivieren können, aber auch jetzt sind die Unterschiede im Ablauf gut durch die If-Else zu erkennen.

Wenn du also nur den neuen Tooltip wieder auf wenige bestimmte Elemente beschränken möchtest, dann ändere doch den Selektor im Skript dafür ab. Also das [title] im jQuery-Selektor $('[title], .tooltip_text') umschreiben. Bei ".ttip[title]" (ohne Leerstelle) muss bspw. im HTML/Foren-Code explizit die Klasse ttip gesetzt worden sein. Etwas besser fände ich hingegen jedoch ".mtext [title]" (mit Leerstelle), damit werden immer noch alle Elemente mit title-Attribut automatisch erfasst, aber nur wenn sie sich in Beiträgen befinden.

Dann kannst du alles innerhalb von Beiträgen automatisch mit Tooltips ausstatten, ohne ggf. ungewollte Elemente in deinem restlichen Forum damit versehentlich auszustatten. Vergiss dann aber nicht, auch in den CSS-Selektoren das [title] so wie im Skript umzuschreiben, damit auch nur die Tooltips in Beiträgen umgestylt werden..