This code does not work. Also tried without JS, by putting attributes into <input>
. Nothing seems to work.
$('#radio1').tooltip({
placement: "bottom",
trigger: "hover"
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="radio1" autocomplete="off"
data-toggle="tooltip" title="tooltip on radio!">Radio 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="radio2" autocomplete="off">Radio 2
</label>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Try to apply tooltip's attributes to the <label>
:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active" data-toggle="tooltip" data-placement="bottom" title="tooltip on radio!">
<input type="radio" name="options" id="radio1" autocomplete="off">Radio 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="radio2" autocomplete="off">Radio 2
</label>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>