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

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

Answer 1

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

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

Answer 2

查看tooltip documentation（尤其是scripting API）和how their API works。

所以它应该适用于：

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（因此您可以排除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/

希望这有助于您开始使用。

鲍勃

Answer 4

您可以使用触发功能启动绑定到mouseOver的其他功能。

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

Answer 5

梅尔，

您可以编写自己的工具提示，工具提示只不过是具有自定义外观和感觉的div框，然后绝对定位。

一旦你的ajax完成，就会通过jquerys show显示工具提示

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

如果你想在几秒钟之后隐藏你也可以使用jquery或javascripts setTimeout（）;

我认为你想要的只是，一旦ajax完成，你在dom中有一些新的html，你想在该代码上方显示一些弹出窗口，

希望这有帮助

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

5 个答案: