【发布时间】：2012-10-21 22:24:35
【问题描述】：
jQuery UI 1.9 中有一个新的 Tooltip Widget，其API docs 提示可以在其中显示 AJAX 内容，但没有任何进一步的细节。我想我可以通过同步和阻塞请求来完成类似的事情，但这不是我想要的。
如何让它显示通过异步 AJAX 请求检索到的任何内容？
【问题讨论】：
【发布时间】：2012-10-21 22:24:35
【问题描述】：
这是来自my blog的jqueryui Tootip小部件的ajax示例。希望对您有所帮助。
$(document).tooltip({
items:'.tooltip',
tooltipClass:'preview-tip',
position: { my: "left+15 top", at: "right center" },
content:function(callback) {
$.get('preview.php', {
id:id
}, function(data) {
callback(data); //**call the callback function to return the value**
});
},
});
【讨论】：
-
它可以工作，但我不明白为什么做一个回调（数据）会在这里返回数据？这很令人困惑，因为对我来说，它看起来像回调，作为一个参数，突然进行函数调用..
这显然不是一个完整的解决方案，但它展示了在open 事件期间动态获取数据的基本技术：
$('#tippy').tooltip({
content: '... waiting on ajax ...',
open: function(evt, ui) {
var elem = $(this);
$.ajax('/echo/html').always(function() {
elem.tooltip('option', 'content', 'Ajax call complete');
});
}
});
查看Fiddle
【讨论】：
-
我注意到，在小提琴上，如果你将鼠标快速移到带有工具提示的文本上，工具提示可能会在“关闭”模式下变得糟糕。我不知道这是工具提示中的错误，与 ajax 代码的交互，还是 jquery-ui 1.9 和 jsFiddle 的 jQuery 1.8.x 之间的版本不兼容。
-
实际上你可以用这个做一些有趣的事情，但我必须更多地了解你的具体用例才能提供更详细的建议。
-
y，你可以用这个做很多事情，我使用隐藏的 div 作为工具提示，在打开的功能中，我只在特定的隐藏 div 为空时才调用 ajax。
使用工具提示“内容”选项将文本“AJAX”到工具提示中时要注意的一点是，文本检索会在工具提示初始化中引入延迟。
如果鼠标在带有工具提示的 dom 节点上快速移动，则鼠标移出事件可能会在初始化完成之前发生，在这种情况下，工具提示尚未侦听该事件。
结果是显示工具提示，直到鼠标移回节点并再次移出时才会关闭。
虽然它会产生一些可能不需要的网络开销，但请考虑在配置工具提示之前检索工具提示文本。
在我的应用程序中，我使用自己的 jquery 扩展来进行 AJAX 调用、解析结果并初始化所有工具提示，显然您可以使用 jquery 和/或您自己的扩展，但要点是：
使用图像标签作为工具提示锚点，要检索的文本由名称属性标识：
<img class="tooltipclassname" name="tooltipIdentifier" />
使用调用扩展方法配置所有工具提示：
$(".tooltipclassname").extension("tooltip");
在扩展的 tooltip 方法内：
var ids = "";
var nodes = this;
// Collect all tooltip identifiers into a comma separated string
this.each(function() {
ids = ids + $(this).attr("name") + ",";
});
// Use extension method to call server
$().extension("invoke",
{
// Model and method identify a server class/method to retrieve the tip texts
"model": "ToolTips",
"method": "Get",
// Send tooltipIds parameter
"parms": [ new myParmClass("tipIds", ids ) ],
// Function to call on success. data is a JSON object that my extension builds
// from the server's response
"successFn": function(msg, data) {
$(nodes).each(function(){
// Configure each tooltip:
// - set image source
// - set image title (getstring is my extension method to pull a string from the JSON object, remember that the image's name attribute identifies the text)
// - initialise the tooltip
$(this).attr("src", "images/tooltip.png")
.prop("title", $(data).extension("getstring", $(this).attr("name")))
.tooltip();
});
},
"errorFn": function(msg, data) {
// Do stuff
}
});
// Return the jquery object
return this;
【讨论】：
这是一个使用带有 jQuery UI 工具提示的 jsfiddle "/echo/html/" AJAX 调用的示例。
HTML：
<body>
<input id="tooltip" title="tooltip here" value="place mouse here">
</body>
JavaScript：
// (1) Define HTML string to be echo'ed by dummy AJAX API
var html_data = "<b>I am a tooltip</b>";
// (2) Attach tooltip functionality to element with id == tooltip
// (3) Bind results of AJAX call to the tooltip
// (4) Specify items: "*" because only the element with id == tooltip will be matched
$( "#tooltip" ).tooltip({
content: function( response ) {
$.ajax({
url: "/echo/html/",
data: {
'html': html_data
},
type: "POST"
})
.then(function( data ) {
response( data );
});
},
items: "*"
});
这是jsfiddle 上的示例：
【讨论】：