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!
mootools Tooltips mit Contao nutzen (überarbeitet)
Zitieren
Zitat von Sawyer
- (also als 2. Website-Startpunkt, in der gleichen TL-Istallation) und ersetzt die momentan noch in CMS made simple gebaute Seite 
.
toll, danke
Mootool Tooltip am title Tag splitten
Lesezeichen