positioning jQuery qTip inside jqueryUI-Draggable

Question

I have a problem in jqueryUI draggable Bootstrap modal with qTip form validator in an Asp.Net web application. As the requirement, I have made the bootstrap modal draggable using jqueryUI Draggable. The problem is, if the tooltip is active and we have dragged the bootstrap modal, the qtip will not move with the modal as displayed in the Screenshot . I am using the following qTip settings:

var q = $(inputs).qtip({
    position: {
        my: 'center left',
        at: 'center right'
    },
    content: {
        text: function (api) {
            return getValidator.call(this).html();
        }
    },
    show: {
        ready: true,
        event: 'none'
    },
    hide: {
        event: 'none'
    },
    style: {
        classes: 'ui-tooltip-red ui-tooltip-shadow ui-tooltip-rounded'
    },
    events: {
        show: function (event, api) {
            var $this = api.elements.target;
            var validator = getValidator.call($this);
            if (validator.length == 0)
                event.preventDefault();
        }
    }
});

I tried to use type: 'relative', and container: $(this).parent(), for the position. But the qtip is still not moving.

I am using following to move the bootstrap modal and it is working as expected.

    $(".modal").draggable({
            handle: ".modal-header",
            containment: "body"
        });

Suggestions/fixes are most welcome.

Answer 1

This wont work because if you take a look closely at the DOM, the actual qtip elements are appended to the body irrespective of the element on which you have initialized it. Hence it is not present in your draggable div and will not be dragged.

My best bet would be to hide the qtip error message when dragging starts and re render them when the dragging has been stopped.