How can i add a tool tip to show the selected value in dropdown using bootstrap or jquery

Question

How can i add a tool tip to show the selected value in dropdown using bootstrap or jquery

<select>
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="mercedes">Mercedes</option>
 <option value="audi">Audi</option>
</select> 

Answer 1

Add bootstrap tooltip.js plugin and try below.

<select id="select">
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="mercedes">Mercedes</option>
 <option value="audi">Audi</option>
</select>



$("#select").change(function(){
       $(this).attr("data-original-title", $(this).val());
       $(this).tooltip();
   });

JSFIDDLE

Answer 2

You'll need tooltip.js in your bootstrap build. Something like this might work.

<!-- markup -->
<select id="mydropdown">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select> 

// JS
$("#mydropdown").change(function() {
    $(this).tooltip({
        title: $("#mydropdown option:selected").val()
    });
});