Mootools tooltip made simple

mootoos setter and getter are just great features, I used it to extend Element with a simple way to provide tooltip.
Adding a tooltip is quite simple:
Element.set('tooltip', 'some html')

removing the tooltip:
Element.set('tooltip', '')

view the demo
the css:


.tip-body {

display:inline-block;
position: absolute;
}
/* .tip-body div {

display: inline-block
} */
.tip-body-right {

background: transparent url(http://dl.getdropbox.com/u/1731360/point/point_left.gif) no-repeat left center;
padding-left: 5px;
}
.tip-body-left {

background: transparent url(http://dl.getdropbox.com/u/1731360/point/point_right.gif) no-repeat right center;
padding-right: 5px;
}
.tip-body-top {

background: transparent url(http://dl.getdropbox.com/u/1731360/point/point_down.gif) no-repeat center bottom;
padding-bottom: 5px;
}

.tip-body-bottom {

background: transparent url(http://dl.getdropbox.com/u/1731360/point/point_up.gif) no-repeat center top;
padding-top: 5px;
}

.tip-container {

background: #4c4c4c;
color: #ffffe5;
padding: 5px 9px;
/* line-height: 10; */
margin: 0;
display:inline-block;
margin: 0 auto;
overflow: hidden;
font-size: 10px;
font-family: verdana;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
/* float: left; */
/* height: 13 */
}


the javascript:



(function () {

var morphIn = {}, morphOut = {}, events = {mouseenter: function () { this.retrieve('tip:body').morph(morphIn) }, mouseleave: function () { this.retrieve('tip:body').morph(morphOut) }},
_follow = function (e) {

var options = this.retrieve('tip:options');
this.retrieve('tip:body').setStyles({left: e.page.x + options.offset.left, top: e.page.y + options.offset.top})
};

Element.Properties.tooltip = {

set: function(message, options) {

if (this.retrieve('tip:body')) {

this.retrieve('tip:body').destroy();
this.eliminate('tip:body').eliminate('tip:options').removeEvents(events);
}

if ((message !== 0 && !message) || ($type(message) == 'element' && message.get('text').trim() !== 0 && !message.get('text').trim())) return this;

options = $merge({
location: 'top',
offset: {left: 5, top: 5},
fixed: true,
opacity: .9
}, options);

this.store('tip:options', options).store('tip:body', new Element("div", {"class": "tip-body tip-body-" + options.location, morph: {duration: 500} }).

adopt(new Element("div", {"class": "tip-container",

html: $type(message) == 'element' ? new Element('div').adopt(message).get('html') : message.replace(/ /g, " ")
})).
inject(document.body)

);

var coords = this.getCoordinates(), tip = this.retrieve('tip:body'), t = tip.getSize(), styles = {opacity: 0};

morphIn = {opacity: options.opacity};
morphOut = {opacity: 0};

//we should use a css instead of this, especially for IE6
if(Browser.Engine.trident && Browser.Engine.version <= 5) {

tip.setStyles({width:
//IE6
Browser.Engine.version <= 4 ? 100 :

//IE7
tip.getElement('div').getWidth(),
overflow: 'visible'});
t = tip.getSize()
}

switch(options.location) {

case 'left':
styles.left = coords.left - options.offset.left - t.x;
styles.top = coords.top;
/* styles.marginLeft = -15; */
morphIn.marginLeft = 0;
morphOut.marginLeft = -15;
break;
case 'right':
styles.left = coords.right + options.offset.left;
styles.top = coords.top;
/* styles.marginLeft = 15; */
morphIn.marginLeft = 0;
morphOut.marginLeft = 15;
break;
case 'bottom':
styles.left = coords.left + (coords.width / 2).round() - (t.x / 2).round();
styles.top = coords.bottom + options.offset.top;
/* styles.marginTop = 15; */
morphIn.marginTop = 0;
morphOut.marginTop = 15;
break;
case 'top':
default:
styles.left = coords.left + (coords.width / 2).round() - (t.x / 2).round();
styles.top = coords.top - options.offset.top - t.y;
/* styles.marginTop = -15; */
morphIn.marginTop = 0;
morphOut.marginTop = -15;
break;
}
tip.setStyles(styles);

if(!options.fixed) events.mousemove = _follow; else delete events.mousemove;
this.addEvents(events);
return this;
},

get: function(message, options){
if (message) this.set('tooltip', message, options);
return this.retrieve('tip:body');
}
}
})();



view the demo

A simple mootools notification system

it is similar to the one found on twitter, i'll not play well in IE6 because it does not handle the position:fixed css style.

jump to the demo

the css


.notify {

cursor: pointer;
z-index: 59999;
position: fixed;
left: 0;
width: 100%;
font-weight: bold;
font-size: 12px;
color:#5c92c6;
background-color: #fbf1a4;
border: 1px solid #ccc;
display: inline-block;
padding: 3px 5px 3px;
}

the timer


//From prototype.js
var PeriodicalExecuter = new Class({

initialize: function(callback, frequency) {

this.callback = callback;
this.frequency = frequency;
this.currentlyExecuting = false;

this.registerCallback();
},

registerCallback: function() {

this.stop();
this.timer = setInterval(this.onTimerEvent.bind(this), this.frequency * 1000);
return this;
},

execute: function() {

this.callback(this);
return this;
},

stop: function() {

if (!this.timer) return this;
clearInterval(this.timer);
this.timer = null;
return this;
},

onTimerEvent: function() {

if (!this.currentlyExecuting) {

try {

this.currentlyExecuting = true;
this.execute();
} finally {

this.currentlyExecuting = false;
}
}

return this;
}
});


the notifier


var Notifier = new Class({

Implements: Options,
queue: [],
options: {

duration: 5000,
location: 'top'
},
initialize: function (options) {

this.setOptions(options);
this.timer = new PeriodicalExecuter(this.display.bind(this), 1).stop();
},
notify: function (message) {

var queue = this.queue;

switch($type(message)) {

case 'array':

message.each(function (m) { queue.push(m) });
break;
case 'object':
default:

queue.push(message);
break;
}

if(!this.timer.currentlyExecuting) this.timer.registerCallback();

return this
},
display: function (pe) {

var queue = this.queue;

//the queue is empty, stop execution
if(queue.length == 0) {

pe.stop();
return this
}

//no notification currently displayed
if(!this.notifier) {

var p = queue.shift(),
options = $merge(this.options, p.options),
notifier = null,
chain = function () { delete this.notifier; notifier.destroy(); }.bind(this),
clean = function () {
notifier.set('tween', {onComplete: chain}).tween('opacity', 0)
};

//empty
if(!p.message) return this;

//show message
notifier = this.notifier = new Element('div', {"class": "notify", events: {click: clean}, styles: {opacity : 0}, html: p.message}).
setStyle(options.location, 0).inject(document.body, 'top').
set('tween', {link: 'cancel', onComplete: function () { setTimeout(clean, options.duration) }}).tween('opacity', 1);
}

return this
}
});


Usage:


window.addEvent('domready', function () {

//messages
var queue = [{message: 'this is the firt text, will disappear in 5s or now if you click'}, {message: 'this is the second text with a duration of 10s, you can wait or click to remove', options: {duration: 10000}}, {message: 'this notification is located at the bottom', options: {location: 'bottom'}}];

new Notifier().notify(queue).notify({message: 'last message'});
});

jump to the demo

Element.shake

Note: an updated demo is now availaible here



When I have some spare-time, I'm searching the web for simple but nice mootools scripts.

the blog of David walsh is one of my favorites, I wrapped his mootools skype effect in Element to make it easier to do.


view a demo

• /*


• based upon work from david walsh, http://davidwalsh.name/skype-mootools





• File:



• element.shake.js





• @author thierry bela





• (code)





• $(element).shake();





• (function () { $(element).shake('horizontal')}).delay(500)


• (end code)



• */




• Element.implement({shake: function () {





• var fx1, fx2, property = arguments[0] == 'horizontal' ? 'margin-left' : 'margin-top';





• if(!this.retrieve('shake:fx1')) {





• this.store('shake:fx2', new Fx.Tween(this, {duration: 100, link: "chain", onChainComplete:function() { this.store('running', false) }.bind(this) })).



• store('shake:fx1', new Fx.Tween(this, {duration: 200, link: "chain", onComplete:function() {



• fx2.start(property, -7).start(property, -4).start(property, -6).start(property, 0);



• }



• })



• );



• }


• fx2 = this.retrieve('shake:fx2'),



• fx1 = this.retrieve('shake:fx1');





• if(!this.retrieve('running')) {





• fx1.start(property, -10).start(property, -4);



• this.store('running', true);



• }





• return this;



• }


• });

view a demo

Mootools CountDown

[Update]

 I have rolled a modified version of this into a plugin that is available in the mootools forge

Hello,

few times ago, I've been looking for a mootools countdown script for mutzigstar.com, The one I found was for 1.11 and encoded with the dean edwards packer, so it was not usable, so I wrote one inspired by the script from here ,

you can view a demo here