jquery - How to show a tooptip to the select box -

i have select box inside form.

<div class="control-group">     <label>![enter image description here][1] :     </label>     <div class="controls">         <select required name="gender" id="gender" class="span12">             <option value=""></option>             <option value="m">male</option>             <option value="f">female</option>             <option value="u">unknown</option>         </select>     </div> </div> 

i want when user clicks form submit button if no option choosen tooltiip display in left side of select box.the want tooltip pointer should point middle of select box.

how can achieve this?

since tagged bootstrap, can achieve tooltip using bootstrap's js components.

i have tried simple one,

$(document).ready(function () {     $("select").tooltip({         placement: 'right'     }); }); 

sample jsfiddle.

hope got idea.