Programmatically 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<开发者_C百科;/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.

---

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

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

---

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

---

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)).

---

You can use trigger function to start other function binded to mouseOver.

$('#ElemWithTootip').trigger('mouseOver');

---

Mel,

You can write your own tooltip , tooltips are nothing but div boxes with custom look and feel and then absolutely positioned.

Once your ajax completes show the tooltip by jquerys show

$('#tooltipid').show(); 

if you want to hide after few seconds you can do that also using jquery or javascripts setTimeout();

I think all you want is , once ajax completes you have some new html in the dom and you want to show some popup above that code right ,

Hope this helps