Bootstrap:ラジオボタンでポップオーバーを呼び出す

CSSを読み込む

<link href="bootstrap.css" rel="stylesheet" type="text/css" />

Javascriptを読み込む&記述する

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>

<script>
var venueID = 5;
$('[id^="radio_venue_"]').popover({
    placement: "top",
    title: "Board & Occupancy",
    content: "Please choose a board & occupancy for this venue",
    container: ".venue-1-" + venueID
});
$("[id^='radio_venue_" + venueID + "']").popover({
    container: ".venue-1-" + venueID
});
</script>

HTML

<label>
  <input type="radio" name="venue_id[]" id="radio_venue_586" value="586" role="button" />ABC
</label>

<div class="venue-1-5"></div>

参考:Bootstrap: trigger popover with a radio button