Tooltipps auch fürs Forum
Hallo Ihr nutzt die Schönen Tooltips im Admin Menü an manchen Stellen habt ihr ein Fragezeichen. 
Gehe ich da´drauf erscheint so ein Tooltip. Ist das mit einen Plugin auch machbar in den Foren?
Wenn das Hier Falsch ist bitte ich das zu Verschieben Alice.
Ich trage es mal als Pluginidee ein und dann besprechen die Jungs ob das möglich ist mario 
#4 RE: RE:Tooltipps auch fürs Forum
Hallo Alice, ich nutze es im Moment über ein Script. Und zwar schaut es so aus das ich in einen Beitrag ein Tooltip anzeigen kann wie auch im Admin Menü
Dazu nutze ich ein Script von Florians Forum und auch der Wolfgang mit seinen Hilfe Tips & Tricks Forum hat da mit gewirkt und das Entwickelt.
Folgendes Script habe ich in der Kopfzeile
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
115
116
117
118
119
120
121
122
123
<!-- 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="https://maps.google.com/maps/api/staticmap?' +
'zoom=11&size=350x350&maptype=terrain&sensor=false¢er=' +
text + '">';
}
if (element.is('[title]')) {
return element.attr('title');
}
if (element.is('img')) {
return element.attr('alt');
}
}
});
});
</script>
Und folgenden Forencode erstellt mit "Ersetze" und "mit"
2
[Tipp]{{text}}......[info]{{tipp}}[/tipp]
<span class="tooltip_text">......<span class="tooltip">{{tipp}}</span></span>
Ich muß dazu im Moment in der Navigation einen Button Klicken.
Dann geht es weiter das ich den Tooltip erstellen kann dazu gebe ich einen Normalen Text (Oder auch Wort) an
Dann gehe ich auf Ok und gebe den Tooltip ein und gehe wieder auf OK
Dann sieht das im Eingabefeld so aus
Und gehe ich auf Vorschau oder auch Speichern sieht das ganze so aus
So und dann ist es eigentlich wie im Admin Menü das wenn ich die Maus Über das Unterstrichene Wort halte erscheint der Tooltip oder die Erklärung für ein Begriff
So und solch eine Funktion stelle ich mir dann für ein Plugin Vor. Sprich ich habe als Admin oder User die Möglichkeit ein Wort in einen Text mit dem Tooltip zu Erklären.
Hoffe ich konnte das nun für euch Verständlich erklären. Und ob und inwiefern so etwas per Plugin Machbar ist dazu schweige ich lieber. Denn dafür kenne ich mich zu wenig aus.
Bei dem Script habe ich im Moment noch ein Problem. Wenn ich das so Installiere und einen Beitrag verfasse und dann ein Smileys einfügen will, geht sobald sich das Smileys Fenster Öffnet und ich zu schnell mit der Maus darüber gehe, das Smileys Fenster selbstständig wieder zu.
Das ist eben nur wenn das Script in die Kopfzeile Eingefügt ist.Sonst Tritt das nicht auf.
#5 Besseres und störungsfreies "JQuery" für Tooltipps
Hallo,
für die Fans von professionellen Tooltipps mit "JQuery" gibt es eine Verbesserung!
Es gibt jetzt eine neue "JQuery - Version", die mit den verwendeten Forum-Scripten störungsfrei läuft.
Störungen unter "Portal bearbeiten", "Drag& Drop aktivieren" im Portal, "Wiki Startseite", ... sind dadurch behoben!
Ähnliche Themen
Jetzt anmelden!
Jetzt registrieren!