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.
Dezember 4th, 2007 at 00:04
Hey, This is really cool. Just what I needed.
I’m having a problem. I had to changed this line:
initialize: function(elem, href, options)
and
this.options = options || {};
But this causes a very strange bug that the tip doens’t show on the first time you hover the element. Do you have any ideas? Does parameters[3] work for you (it wasn’t passing the parameters for me)?
Dezember 28th, 2007 at 21:22
Maybe this was created before the latest prototype, but I got an error using the code above as-is. I had to change the line (line 23 by my count)
elem.observe('mousemove', this.eventMousemove);to
Element.observe(elem, 'mousemove', this.eventMousemove);März 14th, 2008 at 20:02
Great job!! This works with all of the edits listed here, however, the page I pt in there (for example http://www.google.com) some up but is missing formatting and images. Does this put the page in an iFrame inside the prototip? Any idea what could be the trouble here?
Thanks!