Question

I’m sure this is a simple problem .. i’ve wasted too much time already on it

I have the following image:

 <img src="/_/img/icons/103-map.png" alt="Find Me" title="come and find me..." class="action findMe_map"/>

And the following javascript using the 1.2.6 jQuery tools:

 <script>
    $(document).ready(function() {

    // create custom animation algorithm for jQuery called "bouncy"
    $.easing.bouncy = function (x, t, b, c, d) {
        var s = 1.70158;
        if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
        return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
    }

    // create custom tooltip effect for jQuery Tooltip
    $.tools.tooltip.addEffect("bouncy",

        // opening animation
        function(done) {
            this.getTip().animate({top: '+=15'}, 500, 'bouncy', done).show();
        },

        // closing animation
        function(done) {
            this.getTip().animate({top: '-=15'}, 500, 'bouncy', function()  {
                $(this).hide();
                done.call();
            });
        }
    );

    $('img.findMe_map').click(function() {
        event.preventDefault();
        console.log(this);
        $('img[title]').tooltip({effect: 'bouncy'});
    });
 </script>

• When I use the above code, the title disappears from the console.log(this); output and the tooltip doesn’t display the problem I am trying to solve

• When I comment out the tooltip line in the click() and click the image, “come and find me…” appears in the console.

Confused.

Answer 1

Explanation

Everything is configurated in the tooltip options when you initialize it.

$("#demo img[title]").tooltip({
    effect: 'bouncy',
    tipClass: 'foo',
    ...
});

The events are not controlled in the way you might be used to.
They are actually configured when you initialize the tooltip:

$("#demo img[title]").tooltip({
    effect: 'bouncy',
    events:{...}
});

You can read more about it here.

I’m guessing you want it to bounce when you click on it, like it does here.

---

Solution

Here’s a working solution on JSFiddle with 3 different examples of how you can use events.
..although it doesn’t look as cool as it does on their website, it demonstrates how it works!

// create custom animation algorithm for jQuery called "bouncy"
$.easing.bouncy = function (x, t, b, c, d) {
    var s = 1.70158;
    if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
    return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}

// create custom tooltip effect for jQuery Tooltip
$.tools.tooltip.addEffect("bouncy",

    // opening animation
    function(done) {
        this.getTip().animate({top: '+=15'}, 500, 'bouncy', done).show();
    },

    // closing animation
    function(done) {
        this.getTip().animate({top: '-=15'}, 500, 'bouncy', function()  {
            $(this).hide();
            done.call();
        });
    }
);

//Manage all the settings here, and only do it once
$("img.findMe_map").tooltip({
    effect: 'bouncy',
    events: {
        def: "click, mouseout", // default show/hide events for an element
    }
});

Documentation

All the documentation can be found here.

Happy coding! 🙂