Term reference with radio buttons + bootstrap tooltip

Question

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>

Answer 1

Part 1

You can theme a field, using theme suggestions:

field--[type|name[--content-type]|content-type].tpl.php base template:

field.tpl.php

Theme hook suggestions are made based on these factors, listed from the most specific template to the least. Drupal will use the most specific template it finds:

• field--field-name--content-type.tpl.php
• field--content-type.tpl.php
• field--field-name.tpl.php field--field-type.tpl.php

Note that underscores in a Field's machine name are replaced by hyphens. Also remember to include "field-" in custom field names, e.g: field--field-phone.tpl.php.

Get a copy of the base field theme from modules/field/theme/field.tpl.php and copy to your theme's folder, rename and modify as required.

Part 2

A better options is to use the Fences Module which allows for greater control over theming your fields.

Fences is a an easy-to-use tool to specify an HTML element for each field. This element choice will propagate everywhere the field is used, such as teasers, RSS feeds and Views. You don't have to keep re-configuring the same HTML element over and over again every time you display the field.

All of the field tempaltes are in /sites/all/modules/fences/templates and correspond to the type of wrapper you have applied to your field.

Like part 1, copy the field you need into your theme's folder, rename and modify as required.