Restrict qtip2 inside a container

Question

How to keep all the qtips inside a container (I have already tried position.container, position.viewport and position.adjust.method) without any luck, my best guess is that I am not using them correctly.

Update:1 I have created a sample app with more details on below url http://secure.chiwater.com/CodeSample/Home/Qtip

Update:2 I have created jsfiddle link too. http://jsfiddle.net/Lde45mmv/2/

Please refer below screen shot for layout details.

I am calling the area shown between two lines as $container in my js code.

So far I have tried tweaking viewport, adjust method but nothing helped. I am hoping this is possible and I would greatly appreciate any help.

Below is my javascript code which creates 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) {
                   ...
                }
            }
        });

Example of jalopnik page which shows what I am looking for (FWIW jalopnik example doesn't use qtip2).

Answer 1

I don't think qtip API supports this functionality. I ended up re-positioning the tooltip on visible event.

I have updated the demo page and jsfiddle link below is code for doing this.

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
        });
    }
}

Problem with this approach is that there is noticeable jump when I re-position the qTip. But in lack of any other option for time being I will settle with this.

The ideal approach would be to allow callback method thru position.adjust currently it only supports static values for x and y, if a method was allowed here it would make things much smoother.