Tooltip or comment for select options

Question

Im using bootstrap select for my dropdowns. Im interested is it possible to add a comment or a tooltip for each option that would pop up immediatly when i hover my mouse over it? Each comment is about 20-30 words long so it dosent fit well into the list.

At the moment i just have the select element:

<select class="selectpicker" multiple="">
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
</select>
$('select').selectpicker();

http://jsfiddle.net/mfrup5bL/136/

Answer 1

Take a look at this, it works well with bootstrap select. The bootstrap select is an unordered list of your select options.

$(".selectpicker").selectpicker()
var title = [];
$('#mySelect option').each(function(){
    title.push($(this).attr('title'));
});

$("ul.selectpicker li").each(function(i){
  $(this).attr('title',title[i]).tooltip({container:"#tooltipBox"});
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.js"></script>
    		<div class="col-sm-6" style="margin-top:10px;">
    				<select class="selectpicker form-control" id="mySelect" multiple>
    					<option title="Option 1">option one</option>
    					<option title="Option 2">option two</option>
    					<option  title="Option 3">Option three</option>
    					<option title="Option 4">Option four</option>
    					</select>
              <p id="tooltipBox" class="col-sm-6" style="z-index:9999;"></p>
    				</div>