在ajax调用之后以编程方式显示工具提示

Question

我想知道是否有人知道插件或教程如何在ajax调用后触发工具提示.目前我正在使用jQuery Tools来创建工具提示.但我不希望工具提示在mouseOver事件上触发; 相反,我希望他们在ajax调用后显示.我找不到任何关于如何实现这一目标的文档或示例.例如:

<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
            }
        });

jQuery Tools的工作方式是简单地将元素绑定到工具提示中:(但这会导致工具提示在mouseOver上打开)

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

在jQuery工具中有一个包含事件的API,但我不知道如何只在Ajax之后显示工具提示!另一个复杂因素是我需要在多个元素上显示相同的工具提示(或多个工具提示).

Answer 1

绑定工具提示后,仅仅触发鼠标悬停事件不起作用吗？

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

Answer 2

查看tooltip文档(尤其是脚本API)以及API的工作原理.

所以它应该与:

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

您还可以指定应显示工具提示的事件(因此您可能可以将mouseover其排除或更改为您知道从未在该元素上触发的事物(例如change)).

Answer 3

以下是在某些事件后如何显示"工具提示"或弹出对话框的示例.这里没有ajax,只是使用了链接的点击动作.

$(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/

希望这有助于您入门.

短发