限制容器内的 qtip2

Question

如何将所有 qtips 保存在一个容器中（我已经尝试过 position.container, position.viewport and position.adjust.method）没有任何运气，我最好的猜测是我没有正确使用它们。

更新：1 我创建了一个示例应用程序，下面有更多详细信息 url http://secure.chiwater.com/CodeSample/Home/Qtip

更新：2 我也创建了 jsfiddle link。 http://jsfiddle.net/Lde45mmv/2/

有关布局的详细信息，请参阅下面的屏幕截图。

我在我的 js 代码中将两行之间显示的区域称为 $container。

到目前为止，我已经尝试调整视口、调整方法，但没有任何帮助。我希望这是可能的，我将不胜感激任何帮助。

下面是我的 javascript 创建 qtip2 的代码。

 //Now create tooltip for each of this Comment number
        $('#cn_' + num).qtip({
            id: contentElementID,
            content: {
                text: .....
                    var $control = $('<div class="qtip-parent">' +
                                     '    <div class="qtip-comment-contents">......</div>' +
                                     '    <div class="clearfix"></div>' +
                                     '    <div class="qtip-footer"><span class="qtip-commenter">...</span><span class="pull-right"><a href="#' class="nounderline">...</a></span></div>' +
                                     '</div>'
                                     );

                    return $control;
                },
                button: false
            },
            show: 'click',
            hide: {
                fixed: true,
                event: 'unfocus'
            },
            position: {
                my: 'top right',
                at: 'bottom right',
                target: $('#cn_' + num),
                container: $container,
                //viewport: true,
                adjust: { method: 'shift none' }
            },
            style: {
                tip: {
                    corner: true,
                    mimic: 'center',                    
                    width: 12,
                    height: 12,
                    border: true, // Detect border from tooltip style 
                    //offset: 25
                },
                classes: 'qtip-comment'
            },
            events: {
                show: function (event, api) {
                    ...
                },
                hide: function (event, api) {
                   ...
                }
            }
        });

jalopnik 页面示例显示了我正在寻找的内容（FWIW jalopnik 示例不使用 qtip2）。

Answer 1

我认为 qtip API 不支持此功能。我最终重新定位了可见事件的工具提示。

我已经更新了 demo page and jsfiddle link 下面是执行此操作的代码。

events: {
    visible: function (event, api) {
        var $qtipControl = $(event.target);
        $qtipControl.css({ 'left': contentPosition.left + "px" });
        var $qtipTipControl = $qtipControl.find(".qtip-tip");
        var $target = api.get("position.target");
        $qtipTipControl.css({ "right": 'auto' });
        //I am using jquery.ui position 
        $qtipTipControl.position({
            my: "center top",
            at: "center bottom",
            of: $target
        });
    }
}

这种方法的问题是当我重新定位 qTip 时有明显的跳跃。但暂时没有其他选择，我将就此解决。

理想的方法是通过 position.adjust 允许回调方法，目前它只支持 x 和 y 的静态值，如果这里允许一个方法，它会让事情变得更顺利。

限制容器内的 qtip2

Restrict qtip2 inside a container

qtip2