In the details of a user I have a term reference that is presented as radio buttons. You can select one radiobutton. The html looks like this:
<div id="edit-field-abonnement-und" class="form-radios">
<div class="form-type-radio form-item-field-abonnement-und form-item radio">
<input type="radio" id="edit-field-abonnement-und-2" name="field_abonnement[und]" value="2" class="form-radio">
<label for="edit-field-abonnement-und-2">Abonnement 1 </label>
</div>
<div class="form-type-radio form-item-field-abonnement-und form-item radio">
<input type="radio" id="edit-field-abonnement-und-3" name="field_abonnement[und]" value="3" class="form-radio">
<label for="edit-field-abonnement-und-3">Abonnement 2 </label>
</div>
<div class="form-type-radio form-item-field-abonnement-und form-item radio">
<input type="radio" id="edit-field-abonnement-und-4" name="field_abonnement[und]" value="4" class="form-radio">
<label for="edit-field-abonnement-und-4">Abonnement 3 </label>
</div>
<div class="form-type-radio form-item-field-abonnement-und form-item radio">
<input type="radio" id="edit-field-abonnement-und-5" name="field_abonnement[und]" value="5" class="form-radio">
<label for="edit-field-abonnement-und-5">Abonnement 4 </label>
</div>
</div>
But I would like to have a tooltip on each div. I can add a javascript file and send some data to the javascript and set the title with the data (I would do this with taxonomy_term_load).
But how can I get a structure like this and make sure the tooltip works?
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>