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!
Dezember 27th, 2009 at 05:23
5Luu4e hlgpqpxobuaz, [url=http://hcenqbyycqfs.com/]hcenqbyycqfs[/url], [link=http://padjdqpycyix.com/]padjdqpycyix[/link], http://kjtlfsnkwifn.com/