how to position jquery ui dialog

http://jsfiddle.net/Qt7pQ/5/

the above link is a sample of what i am doing.

my question is how can i make jquery ui dialog underneath the radiobutton?

<div id="rbl_1"><input type="radio" group="one" id="r1" value="Milk"> Milk</div>
<div id="rbl_2"><input type="radio" group="one" id="r2" value="Butter" checked> Butter</div>

<div id="divid0" style="border:1px;">0</div>
<div id="divid1">1</div>
<div id="divid2">2</div>

 $('#divid0').dialog({
            autoOpen: false,
        });

       $('#divid1').dialog({
            autoOpen: false,
        });

       $('#divid2').dialog({
            autoOpen: false,
        });          

        $('#rbl_0 :radio').hover(

        function() {
            $('#divid0').dialog('open');
        }, function() {
            $('#divid0').dialog('close');
        });


        $('#rbl_1 :radio').hover(

        function() {
   开发者_如何学Python         $('#divid1').dialog('open');
        }, function() {
            $('#divid1').dialog('close');
        });


        $('#rbl_2 :radio').hover(

        function() {
            $('#divid2').dialog('open');
        }, function() {
            $('#divid2').dialog('close');
        });

You can use the jQuery UI position utility to do this: http://jqueryui.com/demos/position/

For example, to position the "center top" of your <div id="divid0" style="border:1px;">0</div> dialog at the "center bottom" of <div id="rbl_1"><input type="radio" group="one" id="r1" value="Milk"> Milk</div> you would do this:

 $('#divid0').position({ my: 'center top', at: 'center bottom', of: '#rbl_1' });