Balloon.cssを試してみてはどうでしょうか?
ラジオボタンには反応するブラウザとそうでないものがあるようなので
labelタグで囲ってそれにメッセージを書いたほうがよいかもしれません
CSS
1<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.2.4/balloon.min.css">
2<label data-balloon="テストの内容1です。" data-balloon-pos="down"><input type="radio" name="test" value="テストです">test1</label>
3<input type="radio" name="test" value="テストです" data-balloon="テストの内容2です。" data-balloon-pos="down">test2
- test1は多くのブラウザで可動する
- test2はchrome以外はいまいち
追記
jsが使えるなら、htmlを書き換えればよいのでは?
javascript
1<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.2.4/balloon.min.css">
2<script>
3window.addEventListener('DOMContentLoaded', function(e){
4 var n=document.querySelector('#test_id');
5 var l=document.createElement('label');
6 l.setAttribute("data-balloon","テストの内容1です。");
7 l.setAttribute("data-balloon-pos","down");
8 n.parentNode.insertBefore(l,n);
9 l.appendChild(n);
10});
11</script>
12<input type="radio" name="test" value="テストです" id="test_id">
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/22 11:16
2018/10/22 11:17
2018/10/22 11:36
2018/10/22 14:55