Florians Forum » Webmaster » Xobor (Homepagemodules & Dynamicboard) » Funktionen & Template » Tooltips über bestimmten Textstellen
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:
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
<!-- 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¢er=' +
text + '">';
}
// … und nochmals hier
}
});
});
</script>
Wenn das bei dir jetzt genauso aussieht, kann ich mir nicht erklären, warum gar keine Tooltips mehr funktionieren. Ich habe die beiden geänderten Stellen nochmals mit Kommentaren versehen, damit hoffentlich klar ist, was genau ich mir vorstellte.
Mit dem neuen Selektor im letzten Beitrag meinte ich den Ausdruck, welcher die gewünschten Elemente aus dem Quelltext herausfiltert und das Aktivieren des Tooltips darauf ermöglicht. Mit div:not(.xob_iconlist) könnte wahrscheinlich verhindert werden, dass Tooltips in der Symbolbar verwendet werden. Benutze zum Testen wieder das normale ungekürzte Skript und ergänze die eine Zeile mit der Angabe von items folgendermaßen:
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 Florian Danke für deine Hilfe. Leider habe ich zwar den Tooltip sichtbar aber meine Chatfenster spinnen indem sie einfach zu gehen.
Ich werde es nun Vorerst aufgeben und eventuell zu einen Späteren Zeitpunkt noch mal mein Glück versuchen.
Danke für deine Geduld.
lg
Mario
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 Florian,
die Animation und Funktionsweise der Tooltipps mit jQuery UI (jquery-ui-1.10.4.custom.min.js) sind super, aber jQuery UI stört z.B. die Portal-Bearbeitung im Forum.
Es verträgt sich auch nicht immer mit anderen Scripten, wie Foren-Plugins und so......
Ich habe mich entschlossen, das Foren-jQuery (jquery-1.7.1.min.js) für die Tooltipps zu nehmen.
Ist auch recht gut und reicht alle male!
Aber ich habe da noch zwei Hürden:
1. Tooltipps die ganz links angezeigt werden, werden vielreihig oder garnicht angezeigt.
Gibt es hier eine Möglichkeit, dass die Anzeige der Tooltipps nach rechts umklappen und anzeigen?
Oder wird das Script zu groß?
2. Die Foren-Tooltipps werden leider nicht angezeigt (habe da schon einiges probiert 
)
Hier steckt noch ein Fehler drin!
Kannst Du mir da helfen?
***************************
Die Klassen für die Foren-Tooltipp-Auslösung waren ".tooltip_text, .tooltip_text2"
für die Tooltippanzeige ".tooltip"
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
/*Foren-Tooltipp Thread Flat*/
.tooltip {display:none;max-width: 700px;}
.tooltip_text {cursor:pointer;border-bottom:1px dotted blue;}
.tooltip_text a {text-decoration:none;}
.tooltip_text2{cursor:pointer;}
/*jQuery-Tooltipp*/
#tooltipp2{
position:absolute;
display:none;
border-radius:8px;
box-shadow: 3px 3px 6px #aaaaaa;
padding:3px 5px 3px 5px;
color:#0000aa;
border: 2px solid #A2A2A2;
background-color:#ffffff;
font-size:13px;
z-index:5000;
}
</style>
<!-- jQuery-Tooltipp -->
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tooltipp mit jQuery</title>
<!--<script type="text/javascript" src="http://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script>-->
<script>
this.tooltipp2 = function(){
xOffset = 10;
yOffset = 20;
$("[title],.tooltip_text, .tooltip_text2").hover(function(e){
this.titel = this.title;
this.title = "";
$("body").append("<p id='tooltipp2'>"+ this.titel + "</p>");
$("[title],.tooltip_text, .tooltip_text2").mousemove(function(e){
$("#tooltipp2")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.delay(100)
.fadeIn(200)
});
},
function(){
this.title = this.titel;
$("#tooltipp2").remove();
});
};
$(document).ready(function(){
tooltipp2();
});
</script>
</head>
<body>
<br><br><br><br>
<!-- Aufbau Foren-Tooltipp -->
<span class="tooltip_text">Tooltipps ohne "jQueryUI"<span class="tooltip"><img style="border: 0; top:-3px;left: -21px;position:absolute;width:30px;" src="http://www.bilder-hochladen.net/files/1tys-r2-c4b3.png">TEXT TEXT TEXT</span></span>
<br>
<!-- Aufbau Foren-Tooltipp2 -->
<span class="tooltip_text2">Tooltipps ohne "jQueryUI" <span class="tooltip"><img style="border: 0; top:-3px;left: -21px;position:absolute;width:30px;" src="http://www.bilder-hochladen.net/files/1tys-r2-c4b3.png">TEXT TEXT TEXT</span></span>
<!-- Tooltipps mit "title" -->
<span title="Tooltipps ohne 'jQueryUI' " class="tooltip_text">Tooltipps ohne "jQueryUI" </span>
<br><br><br><br>
</body>
</html>
Bis dann und schon mal besten Dank vorweg!
Wolfgang
Hallo Florian,
habe noch etwas gefunden.
Wenn ich wie folgt einen direkten Eintrag mache (orange), dann werden die Tooltipps in den Beiträgen angezeigt.
$("body").append("<p id='tooltipp2'>" + this.titel + " Der Tooltipp funktioniert noch nicht im Thread</p>");
Irgendwie fehlt noch die Übertragung von class="tooltip".
Im anderen Script hattest Du folgende Anpassung vorgeschlagen, habe schon einiges damit probiert, aber nicht hinbekommen.
2
3
4
5
6
7
8
9
function() {
var element = $(this);
if (element.is('.tooltip_text')) {return element.find('.tooltip').html();}
else if (element.is('.tooltip_text2')) {return element.find('.tooltip').html();}
if (element.is('[title]')) {return element.attr('title');}
}
function tooltip_open(tip) {}
function tooltip_close() {}
Gruß
Wolfgang
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. 
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!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>
Wow,
besten Dank für die Lösung.
Der "Überblick" ist Dir auf jeden Fall gelungen! 
Werde ich einbauen, wenn das Forum wieder richtig läuft!
Ich hatte schon ganz schön lange daran herumgebastelt. Nur mit "title" ging es schon.
Notfalls hätte das auch reichen müssen!
Aber das besondere war ja immer, dass die Tooltipps mit "span" frei formatierbar waren.
Ich bin gespannt und werde berichten!
PS:
Mit "<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />" kam beim Zusammenstellen.
Mal wieder:
Wolfgang
Hallo Florian,
habe das Script erstmal trocken ausprobiert und die CSS für mein Forum angepasst.
Sonst läuft das Script super!
Die meta -Zeile hat es uns wohl angetan. 
Wenn man die meta-Zeile so schreibt, werden kein Umlaute dargestellt:
<meta charset="utf-8" />
So ist es richtig, denke ich:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />"
Ich dachte erst [title] kann man nicht formatieren:
Aber, hier muss das "a" vor "[title]" stehen und das ohne Leerzeichen, sonst ist die ganze Anweisung dahin!
Komischerweise muss auch bei der Klasse das "a" nach vorne, sonst funktioniert hier "text-decoration: none;" nicht.
Der Cursor wollte auch versetzt werden, dass er bei Links und einfachem "mouseover (span)" die Hand hebt!
position: relative;
border-bottom: 1px dotted blue;
cursor: pointer;
}
a[title], a.tooltip_text {
/*cursor: pointer !important;*/
text-decoration: none;
}
Da ich immer noch versuche, meine Forum mit alten IE-Versionen laufen zu lassen,
habe ich "img:first-child" (läuft gut ab IE9) gegen <img style="position: absolute; ..... "> ausgetauscht.
****************************************************************************
Frage:
Wie sieht es mit Tooltipps aus, die ganz recht am Rand stehen?
Die können nicht angezeigt werden.
Gibt es da eine unkomplizierte Lösung?
Gibt es hier nicht eine Variable?
left: (e.pageX + offset.x - rand.x) + 'px',
Oder kann der Tooltipp nicht umklappen, wenn er zu dicht am Rand angezeigt wird?
Mein Versuch:
Habe eine weitere Klasse "tooltip_text3" erstellt, das folgende Script verdoppelt und
"left: (e.pageX - 125) + 'px'," für Tooltipps die ganz rechts am Rand sitzen, eingesetzt.
Leider auch nicht so ideal, weil man nicht an alle Scripte, wie z.B. dem Chat kommt.
****************************************************************************
Du hattest erwähnt, beide Scripte evtl. getrennt zu schreiben.
Da ich noch eine Klasse in den alten Tooltipps verwendet hatte,
habe ich die Scripte mal versucht auseinander zu ziehen.
Jetzt konnte ich "tooltipp_text2" noch hinzufügen.
Wer Tooltipps nur in den Beiträgen nutzen will, als Hinweis, Hilfe,...,
kann dann einfach den Teil mit [title] vom Script weglassen.
Hier mein Versuch:
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tooltipp mit jQuery</title>
<style>
[title] {cursor: pointer;}
.tooltip_text, .tooltip_text2 {border-bottom: 1px dotted blue;cursor: pointer;}
span.tooltip_text a, span.tooltip_text2 a{text-decoration:none;}
.tooltip, #tooltipp {display:none;position:absolute;max-width: 700px;padding:3px 17px 3px 15px;color:#0000aa;font-size:13px;z-index:1000;background-color: #ffffff;border: 2px solid #A2A2A2;border-radius: 8px;box-shadow:3px 3px 6px #aaaaaa;}
</style>
<script src="http://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
<!-- Tooltipp im"Thread" -->
$('.tooltip_text,.tooltip_text2').hover(function(e){
tooltip = $(this).find('.tooltip').clone();
$('body').append(tooltip);
$(this).mousemove(function(e){
tooltip
.css({
left: (e.pageX + 25) + 'px',
top: (e.pageY + 18) + 'px'
})
.delay(100).fadeIn(200)
});
},
function(){
tooltip.remove();
}
);
});
///////////////////////////////////
<!-- Tooltipp für Webseiten mit "title" -->
$(document).ready(function(){
$("[title]").hover(function(e){
titel = this.title;
this.title = "";
$("body").append("<p id='tooltipp'>"+ titel + "</p>");
$(this).mousemove(function(e){
$("#tooltipp")
.css({
left: (e.pageX + 25) + 'px',
top: (e.pageY + 18) + 'px'
})
.delay(100).fadeIn(200)
});
},
function(){
this.title = titel;
$("#tooltipp").remove();
});
});
</script>
</head>
<body>
<!-- Tooltipps für den Thread -->
Hallo <span class="tooltip_text">
<a href="http://www.server.de">1. Tooltipps ohne "jQueryUI"</a><span class="tooltip"><img style="position: absolute;width: 30px;left: -17px;top: -5px;border: 0;" src="http://www.bilder-hochladen.net/files/1tys-r2-c4b3.png" />
1. TEXT </span></span> Hallo.
<br><br>
Hallo <span class="tooltip_text2">2. Tooltipps ohne "jQueryUI"<span class="tooltip"><img style="position: absolute;width: 30px;left: -17px;top: -5px;border: 0;" src="http://www.bilder-hochladen.net/files/1tys-r2-c4b3.png" />
2. TEXT </span></span> Hallo.
<br><br>
<!-- Tooltipps für die Forum-Webseiten mit "title" -->
Hallo <span title="3. Text">3. Tooltipps mit "title"-Attribut</span> Hallo.
<br><br>
Hallo <a href="http://www.server.de" title="4. TEXT">4. Tooltipps mit "title"-Attribut </a> Hallo.
</body>
</html>
Wolfgang
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..
Hallo Florian,
besten dank für Dein Bemühen.
Mal sehen, ob ich das alles umsetzen kann.
Breite der Seite, %, px, ...
Tooltipps formatierbar machen, ja, nein,...
Wolfgang