Question

如何将所有qtips保留在容器内（我已尝试position.container，position.viewport和position.adjust.method）没有任何运气，我最好的猜测是我不是正确使用它们。

更新：1 我创建了一个示例应用，其中包含以下网址的更多详细信息 http://secure.chiwater.com/CodeSample/Home/Qtip

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

请参阅下面的屏幕截图了解布局细节。 Layout sample

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

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

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

 //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和jsfiddle链接，下面是执行此操作的代码。

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

1 个答案: