jQuery-Mobile Info Button for Radio and Checkbox selections

Question

Using jquery-mobile 1.4, I've got a set of radio buttons:

<fieldset data-role="controlgroup">
  <legend>Radio Group</legend>
  <input type="radio" name="radio" id="radio_foo">
  <label for="radio_foo">Foo</label>
  <input type="radio" name="radio" id="radio_bar">
  <label for="radio_bar">bar</label>
  <input type="radio" name="radio" id="radio_baz">
  <label for="radio_baz">Baz</label>
</fieldset>

(This is as the jQuery Mobile 1.4 docs show http://demos.jquerymobile.com/1.4.0/checkboxradio-radio/)

I want to provide an info icon for each selection which is clickable apart from the radio button, but on the same line as the radio button. Something like this:

https://i.sstatic.net/TnNl5.png

This would be in lieu of a tooltip for each selection.

Answer 1

One way would be to put the info buttons in their own controlgroup and put the 2 controlgroups next to eachother using a jQM grid

Here is a DEMO

    <div class="ui-grid-a">
        <div class="ui-block-a" style="width: 40px; margin-right: 8px;">
            <fieldset data-role="controlgroup">
                <legend>&nbsp;</legend> 
                <a href="#" class="ui-btn ui-corner-all ui-icon-info ui-btn-icon-notext">Icon only</a>  
                <a href="#" class="ui-btn ui-corner-all ui-icon-info ui-btn-icon-notext">Icon only</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-info ui-btn-icon-notext">Icon only</a>
            </fieldset>
        </div>
        <div class="ui-block-b" style="width: 70%;">
            <fieldset data-role="controlgroup">
                <legend>Radio Group</legend>
                <input type="radio" name="radio" id="radio_foo" />
                <label for="radio_foo">Foo</label>
                <input type="radio" name="radio" id="radio_bar" />
                <label for="radio_bar">bar</label>
                <input type="radio" name="radio" id="radio_baz" />
                <label for="radio_baz">Baz</label>
            </fieldset>
        </div>
    </div>