mootools Tooltips mit Contao nutzen (überarbeitet)
Hallo zusammen,
Contao 2.10 nutzt mootools 1.3. Das mootools-Framework wurde mit Version 1.2 stellenweise überarbeitet. Auch die Tooltips, so dass diese seit TYPOlight 2.7 nicht mehr funktionieren. Ich will deshalb kurz zusammenfassen, wie man die neuen Tooltips implementieren kann:
1. JavaScript-Datei hochladen
Den folgenden Text als Datei "moo_myscript.xhtml" bzw. "moo_myscript.html5" (bzw. "moo_myscript.tpl" bei Contao 2.9 und kleiner) in das Verzeichnis "templates" hochladen. Der Name muss mit "moo_" beginnen und das angegebene Suffix haben. Der Teil "myscript" kann beliebig geändert werden.
Code:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function()
{
new Tips($$('.tooltip'),
{
showDelay: 0, //default is 100
hideDelay: 100, //default is 100
className: 'tool', //default is null
offsets: {'x': 20, 'y': -100 },
fixed: false,
onShow: function(toolTipElement){ toolTipElement.fade(.96);},
onHide: function(toolTipElement){ toolTipElement.fade(0);}
});
});
//--><!]]>
</script>
2. Script in Seitenlayout einbinden
Das Seitenlayout der Seite/n editieren, auf denen die Tooltips erscheinen sollen. Dort unter "Experten-Einstellungen -> MooTools-Templates" die soeben hochgeladene Skriptdatei auswählen.
3. Tooltip erzeugen
Gemäß dem Mythos, der sich zur Vorgängerversion im Netz verbreitet hatte, müssen die Tooltips nun tatsächlich Links sein. Grund ist, dass Titel und Text des Tooltips jetzt nicht mehr per "::" getrennt im title-Attribut untergebracht sind, sondern auf zwei Attribute verteilt sind. Der Titel steht jetzt im title, der Text im rel-Attribut. Letzteres steht nur in Links zur Verfügung. Ein Tooltip sieht dann so aus:
Code:
<a class="tooltip" title="Dies ist der Titel" rel="Hier steht der Text des Tooltips">Linktext</a>
Will man nicht, dass irgendwohin verlinkt wird (es soll nur der Tooltip angezeigt werden), lässt man href, wie hier gezeigt, weg. In dem Fall sollte im CSS der Mauszeiger auf "Hand" gesetzt werden, s. unten. Hier ein Live-Beispiel, oben rechts im Header-Foto.
4. Tooltips stylen
Die Tootips können per CSS gestylt werden. Auch hier gibt es eine Änderung zur Vorgängerversion. Die Klassen lauten nun .tip-titel (für den Title) und .tip-text. Beispiel:
Code:
a.tooltip
{
padding-left:14px;
background-image:url("tl_files/layout/info.gif");
background-position:left center;
background-repeat:no-repeat;
cursor:pointer; /* zeigt Hand bei fehlendem href-Attribut */
}
.tool .tip-title
{
width:350px;
padding:6px;
text-align:left;
background-color:#004e71;
border-top:1px solid #00415e;
border-right:1px solid #00415e;
border-left:1px solid #00415e;
color:#fff;
}
.tool .tip-text
{
width:350px;
margin:0px;
padding:6px;
text-align:left;
background-color:#518ea8;
border-top:0px solid #00415e;
border-right:1px solid #00415e;
border-bottom:1px solid #00415e;
border-left:1px solid #00415e;
font-size:11px;
color:#fff;
}
Die Klasse .tool muss mit der Angabe zu "ClassName" im Skript (s.o.) übereinstimmen.
5. Mehr als Text in Tooltips zeigen
Es ist auch möglich, beliebige Inhalte per Insert-Tag in den Tooltip zu spielen. Mein erster Ansatz sah für ein Inhaltselement z. B. so aus:
Code:
<a class="tooltip" title="Dies ist der Titel" rel='{{insert_content::ID}}'>Linktext</a>
Das rel-Attribut in einfache Anführungsstriche gesetzt, sorgt dafür, dass Anfang und Ende des rel-Attributs erfasst werden, denn komplexere HTML-Inhalte enthalten ihrerseits Attribute und damit Anführungsstriche.
Verbleibendes Problem: Zwar stellen die gängigen Browser die Tooltips mit obigem Aufruf wie gewünscht dar, der Code ist aber nicht valide, da Attribute laut Spezifikation keine spitzen Klammern enthalten dürfen.
Lösung 1: Auf http://www.php-help.ro/examples/moot...ript-tooltips/ wird versteckter Content über seine CSS-ID in das Tooltip-Element gespielt. Hierfür ist das Javascript entsprechend dem Beispiel auf dieser Seite zu erweitern.
Lösung 2: Die im HTML des Tooltips enthaltenen Sonderzeichen werden in Entitäten umgewandelt, so dass es keine spitzen Klammern mehr im rel-Attribut gibt. Dafür müsste es allerdings eine Routine geben, die das Ergebnis eines Inserttags vor Veröffentlichung noch einmal bearbeitet. Und genau dies macht u. a. die Erweiterung improvements von Tristan ab der Version 1.5. In unserem Fall wird der Tooltip gebildet mit:
Code:
<a class="tooltip" title="Dies ist der Titel" rel='{{htmlspecialchars::insert_content::ID}}'>Linktext</a>
Auf gleiche Weise lassen sich natürlich auch ganze Artikel oder Module im Tooltip dastellen: ({{htmlspecialchars::insert_article::ID}} bzw. {{htmlspecialchars::insert_module::ID}})
Weitere Infos und Einsatzmöglichkeiten der Erweiterung auf der Website von Tristan InfinitySOFT. Dank an Tristan und André für die spontane Umsetzung. Ein Live-Beispiel.
Nachteil dieser Lösung: Der Tiny Editor ersetzt standardmäßig einfache Anführungszeichen in doppelte Anführungszeichen.
Gruß
Harry
Tooltips für Bildergalerie nutzen?
Hallo Harry,
die Tooltips sind schick und ich will sie gerne in einer Galerie nutzen.
Da muß ich doch wahrscheinlich den Link irgendwie in der meta.txt unterbringen, oder? Sonst habe ich ja keinen Zugriff auf die Abbildungen.
Mir ist aber die Syntax der meta.txt nicht klar...
HTML-Code:
bild1.jpg = Bildname | <a class="tooltip" title="Dies ist der Titel" rel="Hier steht der Text des Tooltips" href="">Text</a>
funktioniert nicht.
Geht das irgendwie? Wäre super wenn mir jemand helfen könnte...
Christina
Liste der Anhänge anzeigen (Anzahl: 1)
Hallo Christina,
Du hast Recht, das geht über die meta.txt. Problem dabei ist, dass man nun gesondert das rel-Attribut unterbringen muss. Hierfür bietet sich, wenn man die Standard-Bildergalerie nutzen will, die Bildunterschrift (Caption) an. Diese wird dann natürlich nicht mehr unter dem Bild, sondern eben als Tooltip angezeigt. Damit das funktioniert, musst Du das Template "ce_gallery.tpl" anpassen und die gewünschten Infos an die entsprechenden Stellen in die "meta.txt" schreiben.
1. Template "ce_gallery.tpl" anpassen und hochladen
In dem hier angehängten Template werden für jedes Bild die mootools-Tooltips aufgerufen. Im Tooltip-Titel steht der Bildtitel und im Tooltip-Text steht die Bildbeschreibung. Lade dieses Template in Deinen Ordner "Templates" (auf oberster Ebene) hoch.
2. meta.txt erstellen und hochladen
In die meta.txt schreibst Du Zeilen wie etwa
s-grandiflorus.jpg = <b>Selenicereus grandiflorus</b><br>Königin der Nacht || Oh, wie Du mich in den Bann ziehst, engelsgleich Deine zarten Knospen zu einer derartigen Pracht entfaltest, dass mir die Sinne schwinden. Wie viele Nächte habe ich auf diesen Moment gewartet.
Es wird also kein Link angegeben (die zwei ||) . Außerdem kann HTML verwendet werden, wie hier z.B. im Titel (zweizeilig, fett). Die "meta.txt" lädtst Du wie gewohnt in das Verzeichnis, in dem die Bilder untergebracht sind.
Falls noch nicht geschehen, musst Du jetzt noch mootols aktivieren und stylen, s. oben. Dann sollte es klappen.
Gruß
Harry
$show und $hide sind null
Salve,
bei einer anwendung geht der toolitip bei mir.
es gibt einen js fehler im IE und FF
$show und $hide sind null
(das ist auch im o.g.link so (keppler))
woran kann das liegen?
danke
Tooltips von walterzorn.deal
Hallo zusammen
Hänge mich mal da rein, wenn das erlaubt ist.
Ich nutze die Javascript Tooltip Technik von Walter Zorn. Das funktioniert, soweit ich das beurteilen kann, ganz gut.
Möchte ich jedoch zum Text-Tooltip auch noch ein Bild einfügen " <img src="pfad../bild.jpg" /> ", werden die Tag-Klammern beim Speichern des HTML-Dokuments herausgefiltert. Resultat dann wie hier unten im Code.
Das kann dann natürlich beim Rendern nicht funktionieren.Dieses Herausfiltern der Klammern passiert bei jeder TL-Backend-Technik wo man eigenes HTML erzeugen kann.
Interessanterweise passiert das aber nur innerhalb der ersten Anker. Beim letzten Anker (letzte Code-Zeile) bleiben die Klammern erhalten.
Code:
<script type="text/javascript" src="/tl_files/wz_tooltip.js"></script>
<a href="index.htm"
onmouseover="Tip('My Exercises with www.walterzorn.de.'img src=/, TITLE,'Titel',FONTSIZE,'12pt', PADDING, 15);" onmouseout="UnTip()">Homepage </a>
<img src="/tl_files/family/corina1.png">
How come? Ich rätsle und pröble schon seit Stunden.
Herzliche Grüsse
jachen
Mootool Tooltip am title Tag splitten
Also die Variante aus mootools 1.12 tooltip.js gefiehl mir besser, weil diese den Titel und den Text im Tag title="" mit den 2 Doppelpunkten splittete. Also war kein rel="" nötig.
Hier ist das Script aus dem Core von Mootools 1.12
HTML-Code:
<a href="#" title="Ein eleganter Titel::Der Text der um den es geht und den Titel näher beschreibt">Link>/a>
Also wenn man dann noch ne Lightbox mit dem rel="" verwenden will, dann muss man sich entscheiden, Tooltip oder Lightbox für das rel="".
Code:
/*
Script: Tips.js
Tooltips, BubbleTips, whatever they are, they will appear on mouseover
License:
MIT-style license.
Credits:
The idea behind Tips.js is based on Bubble Tooltips (<http://web-graphics.com/mtarchive/001717.php>) by Alessandro Fulcitiniti <http://web-graphics.com>
*/
/*
Class: Tips
Display a tip on any element with a title and/or href.
Note:
Tips requires an XHTML doctype.
Arguments:
elements - a collection of elements to apply the tooltips to on mouseover.
options - an object. See options Below.
Options:
maxTitleChars - the maximum number of characters to display in the title of the tip. defaults to 30.
showDelay - the delay the onShow method is called. (defaults to 100 ms)
hideDelay - the delay the onHide method is called. (defaults to 100 ms)
className - the prefix for your tooltip classNames. defaults to 'tool'.
the whole tooltip will have as classname: tool-tip
the title will have as classname: tool-title
the text will have as classname: tool-text
offsets - the distance of your tooltip from the mouse. an Object with x/y properties.
fixed - if set to true, the toolTip will not follow the mouse.
Events:
onShow - optionally you can alter the default onShow behaviour with this option (like displaying a fade in effect);
onHide - optionally you can alter the default onHide behaviour with this option (like displaying a fade out effect);
Example:
(start code)
<img src="/images/i.png" title="The body of the tooltip is stored in the title" class="toolTipImg"/>
<script>
var myTips = new Tips($$('.toolTipImg'), {
maxTitleChars: 50 //I like my captions a little long
});
</script>
(end)
Note:
The title of the element will always be used as the tooltip body. If you put :: on your title, the text before :: will become the tooltip title.
*/
var Tips = new Class({
options: {
onShow: function(tip){
tip.setStyle('visibility', 'visible');
},
onHide: function(tip){
tip.setStyle('visibility', 'hidden');
},
maxTitleChars: 30,
showDelay: 100,
hideDelay: 100,
className: 'tool',
offsets: {'x': 16, 'y': 16},
fixed: false
},
initialize: function(elements, options){
this.setOptions(options);
this.toolTip = new Element('div', {
'class': this.options.className + '-tip',
'styles': {
'position': 'absolute',
'top': '0',
'left': '0',
'visibility': 'hidden'
}
}).inject(document.body);
this.wrapper = new Element('div').inject(this.toolTip);
$$(elements).each(this.build, this);
if (this.options.initialize) this.options.initialize.call(this);
},
build: function(el){
el.$tmp.myTitle = (el.href && el.getTag() == 'a') ? el.href.replace('http://', '') : (el.rel || false);
if (el.title){
var dual = el.title.split('::');
if (dual.length > 1){
el.$tmp.myTitle = dual[0].trim();
el.$tmp.myText = dual[1].trim();
} else {
el.$tmp.myText = el.title;
}
el.removeAttribute('title');
} else {
el.$tmp.myText = false;
}
if (el.$tmp.myTitle && el.$tmp.myTitle.length > this.options.maxTitleChars) el.$tmp.myTitle = el.$tmp.myTitle.substr(0, this.options.maxTitleChars - 1) + "…";
el.addEvent('mouseenter', function(event){
this.start(el);
if (!this.options.fixed) this.locate(event);
else this.position(el);
}.bind(this));
if (!this.options.fixed) el.addEvent('mousemove', this.locate.bindWithEvent(this));
var end = this.end.bind(this);
el.addEvent('mouseleave', end);
el.addEvent('trash', end);
},
start: function(el){
this.wrapper.empty();
if (el.$tmp.myTitle){
this.title = new Element('span').inject(new Element('div', {'class': this.options.className + '-title'}).inject(this.wrapper)).setHTML(el.$tmp.myTitle);
}
if (el.$tmp.myText){
this.text = new Element('span').inject(new Element('div', {'class': this.options.className + '-text'}).inject(this.wrapper)).setHTML(el.$tmp.myText);
}
$clear(this.timer);
this.timer = this.show.delay(this.options.showDelay, this);
},
end: function(event){
$clear(this.timer);
this.timer = this.hide.delay(this.options.hideDelay, this);
},
position: function(element){
var pos = element.getPosition();
this.toolTip.setStyles({
'left': pos.x + this.options.offsets.x,
'top': pos.y + this.options.offsets.y
});
},
locate: function(event){
var win = {'x': window.getWidth(), 'y': window.getHeight()};
var scroll = {'x': window.getScrollLeft(), 'y': window.getScrollTop()};
var tip = {'x': this.toolTip.offsetWidth, 'y': this.toolTip.offsetHeight};
var prop = {'x': 'left', 'y': 'top'};
for (var z in prop){
var pos = event.page[z] + this.options.offsets[z];
if ((pos + tip[z] - scroll[z]) > win[z]) pos = event.page[z] - this.options.offsets[z] - tip[z];
this.toolTip.setStyle(prop[z], pos);
};
},
show: function(){
if (this.options.timeout) this.timer = this.hide.delay(this.options.timeout, this);
this.fireEvent('onShow', [this.toolTip]);
},
hide: function(){
this.fireEvent('onHide', [this.toolTip]);
}
});
Tips.implement(new Events, new Options);
window.addEvent('domready', function(){ var JTooltips = new Tips($$('.tipp'), { maxTitleChars: 50, fixed: false}); });
Initialisiert im Html wird es mit
Code:
window.addEvent('domready', function(){ var JTooltips = new Tips($$('.tipp'), { maxTitleChars: 50, fixed: false}); });
Der generierte Html Code vom Script
HTML-Code:
<div class="tool-tip" style="position: absolute; top: 355px; left: 1082px; visibility: hidden;">
<div>
<div class="tool-title"><span>360° Ansicht</span></div>
<div class="tool-text"><span>Betrachte PicoX von allen Seiten und sehe die Details im Zoom</span></div>
</div>
</div>
Wenn das jemand adaptieren könnte, wäre das für den Core ne tolle Erweiterung!
Tooltip, habe da etwas gefunden...
http://davidwalsh.name/dw-content/cu...s-tooltips.php
Habe ich getestet, funzt bestens, kann man dierekt in das Seitenlayout im JS einbinden.
Einfach die Klasse .tipz oder andere dem Element geben und im Titel dann Titel::Text eintragen. Den REst kamm dann über css formatieren wie der Tooltip aussehen soll
Code:
.tip { width:295px; font-family:tahoma,arial; background:url(tip-text.png) left top repeat-y; }
.tip-top { background:url(tip-top.png) top left no-repeat; height:26px; width:295px; }
.tip-title { color:#e95e25; font-weight:bold; margin:0 30px 0 50px; }
.tip-text { color:#000; padding:10px 30px 20px 50px; }
.tip-bottom { background:url(tip-bottom.png) left bottom no-repeat; width:295px; height:81px; }
Code:
//when the dom is ready
window.addEvent('domready', function() {
//store titles and text
$$('a.tipz').each(function(element,index) {
var content = element.get('title').split('::');
element.store('tip:title', content[0]);
element.store('tip:text', content[1]);
});
//create the tooltips
var tipz = new Tips('.tipz',{
className: 'tipz',
fixed: true,
hideDelay: 50,
showDelay: 50
});
//create fade
tipz.addEvents({
'show': function(tip) {
tip.fade('in');
},
'hide': function(tip) {
tip.fade('out');
}
});
});
Offset positionierung und Fixed:true funktionieren nicht.......
Hallo,
Ich benutze jetzt auch dieses schöne Erweiterung auf eine Website.
Der Passfoto hat dieses Tooltip Code.
Jetzt versuch ich die offsets an zu passen oder ein fixed positionierung, aber ich schafe es beide nicht. Wenn ich etwas ändern im Offsets Bereich passiert er gar nichts und wenn ich ein fixed position angebe ist er positioniert auf top: 0 und left: 0.
Der Tooltip muss zentriert und oberhalb meine mouse pointer erscheinen.
Habe schon die ganze Mootools code angeschaut und kleine Anpassungen gemacht aber ohne Erfolg... (class:Tips)
Kann jemand mir Weiterhilfen im diese?
Grüsse Rogier Leegwater
