Mohamad Mohamad - 6 months ago 12
jQuery Question

Programatically show tooltip after an ajax call

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

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