Here is a demonstration of the concept I am working on.
My query is regarding how to position a jQuery UI dialog under a radio button?
<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() {
$('#divid1').dialog('open');
}, function() {
$('#divid1').dialog('close');
});
$('#rbl_2 :radio').hover(
function() {
$('#divid2').dialog('open');
}, function() {
$('#divid2').dialog('close');
});