How to Add a tooltip in Radio Buttons when checked in newForm.aspx page

Question

I have custom list with a field type of radio buttons with 4 choices. I want to be able to show a box on right hand side when each radio button is checked .How do i do that? So far i was able to target id of the input field

 $(document).ready(function() 
{

var x= document.getElementById('Site_x0020_Type_084a7e58-b428-4e43-98b6-2a7d10bc8941_$RadioButtonChoiceField0');
if(x.checked=true)

{
alert("done");

$(".ms-RadioText").append('<p>Test description</p>');
}    
});
</script> 

This Script adds the paragraph under the choice, but in all choices. I think that is because i am targetting the class which all of those elements share.

What do i do to display the box on right when choice is selected.

Thank You

Answer 1

here is my mark up taken from IE developer tool.First input control is checked as default in the form.

Answer 2

Try this

I am assuming you want to show box as user click on any of the radio button having style set to ms-RadioText

$(document).ready(function(){
    $('body').append('<div id="box" style="width:10px;height:10px;border:1px solid red;display:none;"></div>');
        $('input[id^="Site_x0020_Type_084a7e58-b428-4e43-98b6-2a7d10bc8941_$RadioButtonChoiceField"]').click(function(){
        if($(this).is(':checked')){
            var pos = $(this).position();
            var width = $(this).outerWidth();

            //show the menu directly over the placeholder
            $("#box").css({
                position: "absolute",
                top: pos.top+3 + "px",
                left: (pos.left + 20) + "px"
            }).show();
        }         
    });
});

Answer 3

You can edit the NewForm in SharePoint Designer, and add an html select element. In this select, each option will correspond to one of your radio button choice. You will have to use jQuery to update your radio button choices. The soltion should resemble to the one that's described in this post: http://sharepointhowtwo.blogspot.com/2014/10/how-to-add-tooltip-to-sharepoint-choice_27.html.

Regards