jquery - qTip2使用ajax定位

Question

我正在为一组菜单创建一个工具提示，内容是从 ajax 调用加载的。我需要每次创建工具提示时刷新内容。我正在使用本指南:http://qtip2.com/guides#content.ajax.loading (就在“连续抓取内容”的上方)

它可以工作，内容已加载，但是工具提示的位置没有改变，因此箭头偏离中心。工具提示仅向右增长并且不会重新定位自身。

代码:

$('.dropdown').qtip({
    overwrite: true,
    position: {
        effect: false,
        my: 'top center',  // Position my top left...
        at: 'bottom center' // at the bottom right of...
    },
    style: 'qtip-menu',
    show: {
        delay: 200
    },
    hide: {
        delay: 200,
        fixed: true
    },
    content: {
        text: function(event, api) {
            var id = $(this).data('id');
            api.elements.content.html('Loading...');

            return $.ajax({
                type: 'post',
                url: '<?=base_url();?>loadajax/menu',
                data: { id: id }
            })
            .done(function(html) {
                return html;
            })
                .then(function(content) {
                    return content
                }, function(xhr, status, error) {
                    api.set('content.text', status + ': ' + error);
                })
            .always(function() {
                $('.dropdown').qtip('reposition');
            });
        }
    }
});

正如你所知，我在 ajax 调用成功后尝试重新定位，并没有做任何困难的事情。

Answer 1

您应该使用事件来更新内容。

这里是一个例子:

        var xhr = null;
        $('#dialog').qtip({
            position: {
                effect: false,
                my: 'top center',  // Position my top left...
                at: 'bottom center' // at the bottom right of...
            },
            style: 'qtip-menu',
            show: {
                delay: 200
            },
            hide: {
                delay: 200,
                fixed: true
            },
            content: 'Loading...',
            events: {
                show: function(event, api){
                    api.set('content.text', 'Loading...');
                    api.reposition();
                    xhr = $.ajax({
                        url: '/echo/html/',
                        type: 'post',
                        data: {
                            html: "<ul><li>element1</li><li>element2</li><li>element3 very very very long</li></ul>",
                            delay: 1
                        },
                        error: function(xhr, status, error){
                            if(status !== 'abort'){
                                api.set('content.text', status + ': ' + error);
                                api.reposition();
                            }
                        },
                        success: function(html){
                            api.elements.content.html(html);
                            api.reposition();
                        }
                    });
                },
                hide: function(event, api) {
                    if(xhr){
                        xhr.abort();
                    } 
                }
            }
        });

完整的示例在这里:http://jsfiddle.net/ztpyd59w/