Thanks for the responses. In fact I have considered all the above arrangements. I am designing a form for a bank. The new design pattern has to fit within the current existing form flow.
The bank has multiple products and we need a way in the form to explain each product to the user. So far we have 2 options. They are as below:
I am not sure about putting the help bubbles in front of the label next to the radio buttons. Visually it is weird, it is not the standard convention of using a help bubble. Having 2 clickable circles side by side might get into usability issues eg: misclicking help bubble when you are going for radio.
I am not sure about appending the help bubble directly after the label. Some labels are long and. The longest 13 chars and the shortest 2 chars. The weird jagged alignment is throwing me off.
I am also not sure about my own option 1. If you align the help bubble to the longest label. For the shortest label, I am wondering if the disconnection will be too great.
So I have a more radical approach, having a button instead as sketched in option 2. Those buttons will behave like radio buttons. If you select one, the other will be greyed out or the selected button will get a visual treatment to indicate it is selected.
Feel free to suggest any other options other than just placing radio buttons around.
Thanks. You guys are great!