Archives Posts
Prototip: Now does AJAX with this little Extension.
Prototip.js is my favorite prototype.js-based tooltip-script at the moment. I’ve just written this piece in morning because we needed the capability of having dynamic content (or postloading big bits of HTML with images). Enjoy!
* AjaxTip
* @version 0.1
* @desc Extension for prototip.js. Now it supports dynamic loading of content. (http://www.nickstakenburg.com/projects/prototip/)
* @author Markus Geiger 2007
* @package AjaxTip
* @license MIT
* @url http://blog.evolution515.net
*/
var AjaxTip = Class.create(Tip, {
hasContentLoaded: false,
start: function() {
this.require(’Tip’);
},
initialize: function(elem, href) {
this.elem = elem;
this.href = href;
this.options = arguments[3] || {};
this.eventMousemove = this.mousemove.bindAsEventListener(this);
elem.observe(’mousemove’, this.eventMousemove);
},
mousemove: function(e) {
if (this.tip)
return false;
// Initialize Tip
var content = ‘<img alt="" src="lib/ajaxloader/tooltip.gif" style="vertical-align: top;" /> Loading…’;
this.tip = new Tip(
this.elem,
content,
this.options
);
// Make AJAX Request and load content
var tip = this.tip;
this.request = new Ajax.Request(
this.href,
{
method: ‘get’,
onSuccess: function(transport) {
tip.content = transport.responseText;
tip.tip.innerHTML = transport.responseText;
}
}
);
this.elem.tip = this.tip;
Event.stopObserving(this.elem, ‘mousemove’, this.eventMousemove);
}
});
And here’s a replacement for a better default CSS style:
/* Tooltip styles */
.prototip .default {
width: 150px;
}
.prototip .default .toolbar {
background: #FFE;
}
.prototip .default .title {
padding: 5px;
}
.prototip .default .content {
background: #FFE;
font-size: 11px;
font-family: Arial, sans-serif;
padding: 6px;
text-align:left;
min-height:1em;
width:200px;
color:#000;
border:1px solid #999;
border-radius:5px;
-moz-border-radius:5px;
}
You can create a neat AJAX-Loader GIF here. Use #FFFFDD for background and #999999 for foreground color.