This is not working since blog upgrade, looking into it
**update** deprecated. On how to create a tooltip class, read this
Seems that Apple really inspire design… After having done largerBox: a mootools apple-style modal lightbox effect, I thought I’d also do some animated tooltip effects similar to the ones on their site. So, I finally got around to it and just drafted an element method for the fragged tooltips (called, slidingTips or slidingTips) into my dci_core.js collection.
Not much more to say, here it is in action:
You can interact with all form elements in this div to get a tooltip
show on focus / hide o n blur:
show on click / dispose after 5 seconds:
show on mouseover / hide on mouseout:
The code? First, the Element.implement bits, 2 functions:
Element.implement({ slidingTip: function(what, options) { // apple style tooltip var _this = this, coords = _this.getCoordinates(), options = $merge({ eventEnd: "mouseleave", eventEndTrigger: _this, // parent element or self topOffset: 90, // offset when in full view topStartOffset: 100, // offset for animation start opacity: .8, // target opacity in full view className: "tooltip", // linked to css morphOptions: { duration: 300, transition: Fx.Transitions.Sine.easeOut, }, delay: 0, // can dispose on a timer, in seconds id: "tid" + $random(100, 1000) }, options); // we only need one tip instance per parent element. if ($type(this.tip) != "element") { this.tip = new Element("div", { "class": options.className, id: options.id, }); } // if it's an existing one, with an implicit id, pick it up if ($(options.id)) this.tip = $(options.id); // set initial options and html this.tip.set({ opacity: 0, html: "<div style='padding:20px'>" + what + "</div>", styles: { left: coords.left + coords.width / 2 } }).inject(document.body).removeEvents(); // show it. cancel any previous animation instances for tip if ($type(this.morph) == "object") this.morph.cancel(); else this.morph = new Fx.Morph(this.tip, options.morphOptions); // show it. really. this.morph.start({ opacity: options.opacity, top: [coords.top - _this.tip.getSize().y - options.topStartOffset, coords.top - options.topOffset] }).chain(function() { // once done, decide how to exit if (options.delay == 0) { // based on an event. options.eventEndTrigger.addEvent(options.eventEnd, function() { _this.morph.cancel(); _this.slidingTipaway(); }); } else { // based on a timed delay (function() { _this.slidingTipaway(); }).delay(options.delay); } }); // define the tooltip close animation morph object var closeAnimation = { opacity: 0, top: coords.top - _this.tip.getSize().y - options.topStartOffset } // ... and save it within the parent element this.store("closeAnimation", closeAnimation); return this; }, slidingTipaway: function() { // animate an slidingTip, opposite on in method. if (this.tip) { this.morph.start(this.retrieve("closeAnimation")); } return this; } });
There is some CSS to this:
< div.tooltip { background:transparent url(/images/tooltip-ie.gif) no-repeat scroll 50% 50%; height:90px; left:50%; margin-left:-151px; position:absolute; text-align:center; top:0; width:299px; z-index:1010000000; color: #327bb2; font-weight: bold; }
And finally, the demo code:
window.addEvent("domready", function() { $("demofocus").addEvent("focus", function() { this.slidingTip("Please enter your first name and your surname", { eventEnd: "blur", // on blur, remove tip topOffset: 82 // tuck in more (heigh is 90 usually) }); }); $("demosubmit").addEvent("click", function(e) { e.preventDefault(); // stop submit from happening this.slidingTip("Sorry, you are required to complete all fields before you can submit", { delay: 5 * 1000, // remove tooltip after 5 seconds topOffset: 82 }); }); // find all .demo_mouse class elements and tooltip them to show data-tip values $$(".demo_mouse").each(function(el, i) { el.addEvents({ mouseenter: function() { this.slidingTip(this.get("data-tip"), { id: "demoid"+i, // can assign implicit ids to shadows for scripting morphOptions: { duration: 600 } }); }, click: function(e) { // prevent the submit from working.... e.preventDefault(); } }); }); });
Now, the fragged apple slidingTips currently uses this image:

This is a .GIF so it will be IE friendly (as opposed to a .PNG with transparency). Alpha blending/anti aliasing is not perfect but will work on a light background (hence the white around the demo code).
This one:

... way nicer. But, on IE7 even (which allegedly supports transparency in PNG), there is a nasty bug and alpha bleeding near the pointy arrow. You can try using it by changing the .tooltip css class.
I like what I see. The styling looks clean and the effects smooth, however I am not a fan of allowing multiple tooltip windows to cascade… If you click around too quickly you will find a bunch of windows causing clutter and, in actuality, making it hard to read any one particular one. None the less, cool. And btw, glad to see the blog come of this domain… Been following the domain for years back when you were messing with Doom 3 styling.