如何在我所有的单选按钮上悬停jquery工具提示

Question

I have a form in which I have a button at the top. If I click that button, then it shows four radio buttons at the bottom.. And now I am planning to have jquery tool tip hover on all my Radio Buttons.

Here is my jsfiddle .

• If I am moving my mouse on TEST1 radio button, I would like to show Hello Test1
• If I am moving my mouse on TEST2 radio button, I would like to show Hello Test2
• If I am moving my mouse on TEST3 radio button, I would like to show Hello Test3
• If I am moving my mouse on TEST4 radio button, I would like to show Hello Test4

Is this possible to do? I saw this example but they have radio button in div somehow so not sure how would this work in my situation.

Can anyone provide jsfiddle example?

NOTE:-

Hello Test1 is just an example, it can be any word or paragraph of two three lines.. When I will be integrating the code, I will use different words for all my radio buttons..

Answer 1

here is attach demo link please see it :

http://jsfiddle.net/4Nmqk/32/

add this to your js

$('label').tooltip({
    placement : 'top'
});

you html is like this

    <label  title='hello test1'><input type="radio" name="data" id="data" value="test1">TEST1 </label>
    <label title='hello test2'><input type="radio" name="data" id="data" value="test2">TEST2 </label>
    <label  title='hello test3'><input type="radio" name="data" id="data" value="test3">TEST3 </label>
    <label  title='hello test4'><input type="radio" name="data" id="data" value="test4">TEST4 </label>

you want any other name to each input you can change title of label tag as your choice.

you also use id=data for all four input this is not valid html you can use id's same value only one time for page so give different id value for all four input or you can use class instead of id.

Answer 2

You can iterate the radio buttons and set title for it

$("input[type*=radio]").each(function(i,value){ 
    $(this).attr("title","Hello "+$(this).val());
    });

http://jsfiddle.net/4Nmqk/30/