無線入力によるブートストラップのツールチップ

Question

このコードは機能しません。また、JSなしで、属性を<input>に入れて試しました。何も動作していないようです。

$('#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>

Answer 1

<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>