Show tooltip in selected list box using jQuery

Question

How to show a title or a tooltip when the mouse pointer is in the list, as in the following figure?

.

Answer 1

see example ::

<!-- Include custom code to handle the tooltip --> <script type="text/javascript"> //After loading the page insert the title attribute. $(function(){ $("select option").attr( "title", "" ); $("select option").each(function(i){ this.title = this.text; }) }); //Attach a tooltip to select elements $("select").tooltip({ left: 25 }); </script> <!-- When moving the mouse over the below options --> <select> <option>very long option text 1</option> <option>very long option text 2</option> <option>very long option text 3</option> <option>very long option text 4</option> <option>very long option text 5</option> <option>very long option text 6</option> </select> 

Answer 2

HTML:

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

JavaScript:

 $(document).ready(function(event) { $('#sel').mouseenter(function(e) { this.title = $("#sel option:selected" ).text(); }); });