views:

43

answers:

0

I have a form loading in a Thickbox, which is submitted using AjaxForms and I'm trying to add some nice qTips to give users a better understanding of what the form field does when they enter data (it's a configuration options modal dialog)

The existing stuff works fine, the ThickBox pops and the form displays and submits okay. However I cannot seem to get a qTip to display on any elements. I have managed to get one working by manually attaching it using the Firebug console.

I have placed the code for expanding the 'advanced' panel and the qtip into the page loaded into the ThickBox, and jQuery 1.4.2 is loaded globally in the project.

<script type="text/javascript" src="js/jquery.qtip-1.0.0-rc3.min.js"></script>
<script type="text/javascript">
$(function(){
        $('div#advanced').hide();
        $('#advtoggle').click(function(e){
            e.preventDefault();
            $('div#advanced').toggle();
        });

        $('#theme').qtip({
            content: "Default theme id, 7 for a custom window",
            position: {
                corner: {
                    target: 'topRight',
                    tooltip: 'bottomLeft'
                }
            },
            style: {
                name: 'cream',
                tip: true
            }
        });
});
</script>

I can expand the panel without issue, but I'm very confused as to why my qTip will not display.

My first thoughts were that the qTip couldn't initialise because the thickbox wasn't open and therefore the dom doesn't exist yet, but it's in a shorthand ready() so that should be okay. I tried removing the ready and also tried moving the code into the parent page, neither of which gave any results.

Any ideas would be greatly appreciated! Ta

PS,

Adding it in Firebug seems to throw this error now,

>>> $('#theme').qtip();
TypeError: f(this).data("qtip") is null { message="f(this).data("qtip") is null", more...}