Question

我正在为一组菜单创建工具提示，并且内容是从ajax调用加载的。每次创建工具提示时，我都需要刷新内容。我正在使用本指南：http://qtip2.com/guides#content.ajax.loading（正好在其上面写着“Grab content continuousl”）

它有效，内容被加载，但工具提示的定位不会改变，箭头偏离中心。工具提示仅向右增长，不会重新定位。

代码：

$('.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/

用ajax定位qTip2

1 个答案: