jQuery 在 ajax 调用后以编程方式显示工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4417984/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Programmatically show tooltip after an ajax call
提问by Mohamad
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 Toolsto 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:
我想知道是否有人知道有关如何在 ajax 调用后触发工具提示的插件或教程。目前我正在使用jQuery 工具来创建工具提示。但我不希望工具提示在 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
}
});
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)
jQuery Tools 的工作方式是简单地将元素绑定到工具提示上：（但这会导致工具提示在 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.
jQuery 工具中有一个包含事件的 API，但我不知道如何只在 Ajax 之后显示工具提示！另一个复杂的因素是我需要在多个元素上出现相同的工具提示（或多个工具提示）。
采纳答案by rcravens
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.
下面是如何在某个事件之后显示“工具提示”或弹出对话框的示例。这里没有ajax，只是使用链接的点击动作。
$(document).ready(function() {
$("#vote").click(function(evt) {
evt.preventDefault();
// Do your ajax
// Show the popup
$("#tooltip").show();
});
$("#tooltip").click(function() {
$(this).hide();
});
});
Hope this helps you get started.
希望这可以帮助您入门。
Bob
鲍勃
回答by karim79
Does it not work to simply trigger the mouseover event after binding the tooltip?
绑定工具提示后简单地触发鼠标悬停事件不起作用吗？
$('#myElement').tooltip().mouseover();
回答by Felix Kling
Have a look at the tooltipdocumentation(especially the scripting API) and the how their API works.
查看tooltip文档（尤其是脚本 API）以及它们的 API是如何工作的。
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 mouseoveror change it to something that you know is never triggered on that element (like change)).
您还可以指定应在哪些事件中显示工具提示（因此您可以排除mouseover或将其更改为您知道永远不会在该元素上触发的内容（如change））。
回答by Lex
You can use trigger function to start other function binded to mouseOver.
您可以使用 trigger 函数来启动绑定到 mouseOver 的其他函数。
$('#ElemWithTootip').trigger('mouseOver');
回答by kobe
Mel,
梅尔，
You can write your own tooltip , tooltips are nothing but div boxes with custom look and feel and then absolutely positioned.
您可以编写自己的工具提示，工具提示只不过是具有自定义外观和感觉的 div 框，然后绝对定位。
Once your ajax completes show the tooltip by jquerys show
ajax 完成后，通过 jquerys show 显示工具提示
$('#tooltipid').show();
if you want to hide after few seconds you can do that also using jquery or javascripts setTimeout();
如果你想在几秒钟后隐藏你也可以使用 jquery 或 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 ,
我想你想要的只是，一旦 ajax 完成，你在 dom 中有一些新的 html，并且你想在该代码上方显示一些弹出窗口，
Hope this helps
希望这可以帮助
