Programmatically show tooltip after an ajax call

Question

I'm wondering if anyone is aware of a plugin or a tutorial on how to trigger a tooltip after an ajax call. At the moment I'm using jQuery Tools to create the tooltips. But I don't want the tooltips to trigger on a mouseOver event; rather, I want them to show after an ajax call. I can't find any documentation or examples on how to achieve this. For example:

<a class="vote">Vote</a>

<div id="tooltip">
Some tooltip with a message.
</div>

$.ajax({
    context: this,
    dataType: 'json',
    success: function(response) {
        if (response.result == "success") {
// SHOW TOOL TIP HERE
        } 
        else {
// SHOW ANOTHER TOOL TIP HERE
            }
        });

The way jQuery Tools works is by simply binding the element to the tool tip as such: (but this causes the tooltip to open on mouseOver)

$("#myElement").tooltip();

There is an API with events included in jQuery tools, but I have no clue how to only show the tooltip after the Ajax! Another complicating factor is the I need to have the same tooltip (or multiple tooltips) appear on multiple elements.

Answer 1

Here is an example of how to show a 'tooltip' or a popup dialog after some event. No ajax here, but just using the click action of the link.

$(document).ready(function() {

    $("#vote").click(function(evt) {
        evt.preventDefault();

        // Do your ajax
        // Show the popup
        $("#tooltip").show();
    });

    $("#tooltip").click(function() {
        $(this).hide();
    });

});

http://jsfiddle.net/Tm8Lr/1/

Hope this helps you get started.

Bob

Answer 2

Does it not work to simply trigger the mouseover event after binding the tooltip?

$('#myElement').tooltip().mouseover();

Answer 3

Have a look at the tooltip documentation (especially the scripting API) and the how their API works.

So it should work with:

if (response.result == "success") {
    $('#myElement').data('tooltip').show();
} 
else {
    // don't know which other tooltip you want to show here
}

You can also specify at which events the tooltip should be shown (so you probably can exclude mouseover or change it to something that you know is never triggered on that element (like change)).