Question

Here is my attempt so far http://thezoo.com/test/

At http://tooltipsy.com/samples.html his 7th example down the page labeled “More Extreme – how about falling from the sky” makes a div fall from the top of the page and bounce above the clicked box.

I’m trying to get his code to work independently of his tooltip routines, to simply work with the basic jquery and UI library. His unique offering to the world is the falling from the top of the page part. I’ve tried a few onclick functions on a div or using a link trigger and replacing his 1st line with this:
$(‘mydiv’).click(function(){
but no luck so far. What am I missing? I would like to use the falling from the sky routine with Qtip2 or ClueTip.

Here is how he did it:

$('.hastip').tooltipsy({
    offset: [-10, 0],
    show: function (e, $el) {
        $el.css({
            'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) - 50 + 'px',
            'opacity': '0.0',
            'display': 'block'
        }).animate({
            'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) + 50 + 'px',
            'opacity': '1.0'
        }, 300);
    },
    hide: function (e, $el) {
        $el.slideUp(100);
    }
});

Thanks for the assist.

Answer 1

Here’s jsfiddle with working demo:

http://jsfiddle.net/apHLu/4/

There’s no fadeOut and other effects, only bounce from the top. I hope you’ll get general idea how it works and adapt to you needs;