[jQuery] probelm with cluetip and radio button lists

[couch]

I'm trying to create a radio button list programatically from a
database, and have cluetip messages on the labels.

I first created the databound radio button list in .NET and applied
the code:

$(document).ready(function(){
        $('span.tips').cluetip({
             splitTitle: '|',
             showTitle: true,
             arrows: true
             });
});

This works fine and shows the cluetip, but for some reason, you cannot
click on the radio buttons to make a selection??? I suspected that the
problem was because the span is around both the input and label tags:

<td><span title="" class="tips"><input id="publicHols_0" type="radio"
name="publicHols" value="" checked="checked" /><label
for="publicHols_0">None</label></span></td>
<td><span title="Holidays for Australia:|01 Jan 2010   New Year's Day|
26 Jan 2010 - Australia Day" class="tips"><input id="publicHols_1"
type="radio" name="publicHols" value="AU" /><label
for="publicHols_1">Australia</label></span></td>

So, I removed the .NET databound list, and used a json call to a
handler file to create the radio button list like this:

$(document).ready(function(){
        $.getJSON('pubHols.ashx', function(country) {
            var i = 0;
            $.each(country, function() {
                var hols = "<input id=\"RadioButton" + i + "\" type=
\"radio\" name=\"publicHols\" value=\"" + this['Region'] + "\" /><span
title=\"" + this['Holidays'] + "\" class=\"tips\"><label for=
\"RadioButton" + i + "\" >" + this['Country'] + "</label></span>";
                $('#pubHols').append
(hols);
                i++;
            });
        });
        $('span.tips').cluetip({
             splitTitle: '|',
             showTitle: true,
             arrows: true
             });
});

This time, the list of radio buttons appears ok, and you can make a
selection, but the cluetip now doesn't work, and I just get the
standard title appearing???

Any ideas or suggestions?