jQuery UI工具提示小部件中的AJAX内容

Question

jQuery UI工具提示小部件中的AJAX内容

ajaxjquery-uijquery

32

jQuery UI 1.9中有一个新的工具提示小部件，其API文档暗示可以在其中显示AJAX内容，但没有进一步详细信息。我猜我可以通过同步和阻塞请求来实现类似的功能，但这不是我想要的。

我该如何使它显示通过异步AJAX请求检索到的任何内容？

- sanmai

4个回答

19

这显然不是一个完整的解决方案，但它展示了在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

- slashingweapon

1

我注意到在fiddle上，如果你快速地将鼠标移动到tooltip文本上，那么tooltip可能会卡在“关闭”模式。我不知道这是tooltip中的一个bug，与ajax代码的交互，还是jquery-ui 1.9和jsFiddle的jQuery 1.8.x之间版本不兼容引起的。 - slashingweapon

实际上，你可以用这个做一些有趣的事情，但我需要了解更多关于你具体使用场景的信息，才能提供更详细的建议。 - slashingweapon

你可以用这个做很棒的东西，我正在使用隐藏的 div 元素来制作工具提示，在打开函数中，只有当特定的隐藏 div 为空时才进行 ajax 调用。 - sanjuro

3

这里有一个使用jsfiddle "/echo/html/" AJAX调用和jQuery UI工具提示的示例。

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的示例：

- Jay Sheth

3

当使用工具提示的“内容”选项将文本“AJAX”到工具提示中时，请注意一件事情，即文本检索会在工具提示初始化过程中引入延迟。如果鼠标快速移动到带有工具提示的DOM节点，那么鼠标移出事件可能会在初始化完成之前发生，此时工具提示尚未监听该事件。结果是工具提示被显示，并且直到鼠标再次移回节点并移出时才关闭。虽然这会产生一些网络开销，但考虑在配置工具提示之前检索工具提示文本。在我的应用程序中，我使用自己的jquery扩展来进行AJAX调用、解析结果并初始化所有工具提示，当然你可以使用jquery和/或你自己的扩展程序，但要点是：使用图像标记作为工具提示锚点，欲检索的文本由name属性标识。

<img class="tooltipclassname" name="tooltipIdentifier" />

使用调用扩展方法来配置所有工具提示：

$(".tooltipclassname").extension("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;

- Beau

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ZHAO Xudong · Accepted Answer

这是一个jQueryUI tooltip插件的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**
        });
    },
});