jQuery UI 工具提示小部件中的 AJAX 内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13175268/
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
AJAX content in a jQuery UI Tooltip Widget
提问by sanmai
There is a new Tooltip Widget in jQuery UI 1.9, whose API docshint that AJAX content can be displayed in it, but without any further details. I guess I can accomplish something like that with a synchronous and blocking request, but this isn't what I want.
jQuery UI 1.9 中有一个新的工具提示小部件，其API 文档暗示可以在其中显示 AJAX 内容，但没有任何进一步的细节。我想我可以通过同步和阻塞请求来完成类似的事情，但这不是我想要的。
How do I make it display any content that was retrieved with an asynchronous AJAX request?
如何让它显示通过异步 AJAX 请求检索到的任何内容？
回答by ZHAO Xudong
Here is a ajax example of jqueryui tootip widget from my blog.hope it helps.
这是我博客中的jqueryui toip 小部件的 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**
});
},
});
回答by slashingweapon
This isn't a complete solution obviously, but it shows the basic technique of getting data dynamically during the openevent:
这显然不是一个完整的解决方案，但它展示了在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');
});
}
});
See the Fiddle
看小提琴
回答by Beau
One thing to lookout for when using the tooltip "content" option to "AJAX" the text into the tooltip, is that the text retrieval introduces a delay into the tooltip initialization.
使用工具提示“内容”选项将文本“AJAX”到工具提示中时要注意的一件事是，文本检索会在工具提示初始化中引入延迟。
In the event that the mouse moves quickly across the tooltip-ed dom node, the mouse-out event may occur before the initialization has completed, in which case the tooltip isn't yet listening for the event.
如果鼠标在带有工具提示的 dom 节点上快速移动，则鼠标移出事件可能会在初始化完成之前发生，在这种情况下，工具提示尚未侦听该事件。
The result is that the tooltip is displayed and does not close until the mouse is moved back over the node and out again.
结果是显示工具提示并且在鼠标移回节点上并再次移出之前不会关闭。
Whilst it incurs some network overhead that may not be required, consider retrieving tooltip text prior to configuring the tooltip.
虽然它会产生一些可能不需要的网络开销，但请考虑在配置工具提示之前检索工具提示文本。
In my application, I use my own jquery extensions to make the AJAX call, parse the resutls and initialise ALL tooltips, obviously you can use jquery and/or your own extensions but the gist of it is:
在我的应用程序中，我使用我自己的 jquery 扩展来进行 AJAX 调用，解析结果并初始化所有工具提示，显然你可以使用 jquery 和/或你自己的扩展，但它的要点是：
Use image tags as tooltip anchors, the text to be retrieved is identified by the name atrribute:
使用图像标签作为工具提示锚点，要检索的文本由名称属性标识：
<img class="tooltipclassname" name="tooltipIdentifier" />
Use invoke extension method to configure all tooltips:
使用 invoke 扩展方法配置所有工具提示：
$(".tooltipclassname").extension("tooltip");
Inside the extension's tooltip method:
在扩展的工具提示方法中：
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;
回答by Jay Sheth
Here is an example that uses the jsfiddle "/echo/html/" AJAX call with a jQuery UI tooltip.
这是一个使用 jsfiddle "/echo/html/" AJAX 调用和 jQuery UI 工具提示的示例。
HTML:
HTML：
<body>
<input id="tooltip" title="tooltip here" value="place mouse here">
</body>
JavaScript:
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: "*"
});
here is this example on jsfiddle:
这是jsfiddle上的这个例子：
