Can't use twitter-bootstrap popover in a <select> tag

Question

I'm displaying a list in a <select> html tag and I want to display some details about each items with a popover. I loaded all the js files and I initialise for every <option> but it won't show any information.

 <select id="type_traitement" class="span10"> 
                <?php
                foreach ($type_traitement_simple as $tts) {
                    echo '<option value="' . $tts->id_type_traitement_simple . '">
                        <a href="#" 
                        rel="popover" data-content="' . $tts->description . '"
                        data-original-title="' . $tts->name . '"id="t_'.$tts->id_type_traitement_simple.'">                         
                        ' . $tts->name . '
                            </a>
                            </option>';

                    ?>
                    <script>  
                        $(function ()  
                        { $("#t_<?php echo $tts->id_type_traitement_simple ?>").popover();  
                        });  
                    </script>
                    <?php


                }
                ?>
            </select>

Answer 1

Update your foreach loop to look like the following.

<?php foreach($type_traitement_simple as $tts): ?>
<option value="<?php echo $tts->id_type_traitement_simple; ?>"
    data-content="<?php echo $tts->description; ?>"
    data-title="<?php echo $tts->name; ?>"><?php echo $tts->name; ?></option>
<?php endforeach; ?>

That should be the loop sorted. now put the below JavaScript after jQuery, Bootstrap Tooltip and Bootstrap Popover scripts.

<script type="text/javascript">
$(function() {
    $('#type_traitement option').popover({
        placement: 'right',
        trigger: 'manual'
    }).hover(function() {
        $(this).popover('toggle');
    });
});
</script>