Im using bootstrap select for my dropdowns. Im interested is it possible to add a ment or a tooltip for each option that would pop up immediatly when i hover my mouse over it? Each ment 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();

/

Im using bootstrap select for my dropdowns. Im interested is it possible to add a ment or a tooltip for each option that would pop up immediatly when i hover my mouse over it? Each ment 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/mfrup5bL/136/

• javascript
• jquery
• html
• css
• twitter-bootstrap

• give it a try:stackoverflow./questions/41359450/… – Nishad K Ahamed Commented Oct 19, 2017 at 5:22
• here is what i ended up with: jsfiddle/mfrup5bL/142 - dosent seem to work with bootstrap select, if i remove bootstrap select it works. – user1985273 Commented Oct 19, 2017 at 11:26

4 Answers 4

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./ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare./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>

Try this. Working copy attached.

<option value="1" title="Long description">Short desc...</option>

<select>
  <option value="1" title="Long description Long description Long description Long description Long description Long description Long description Long description Long description Long description Long description">Short desc...</option>
  <option value="volvo" title="i AM a generic content">Volvo</option>
  <option value="saab" title="Long description">Saab</option>
  <option value="opel" title="Long description">Opel</option>
  <option value="audi" title="Long description">Audi</option>
</select>

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <select class="form-control" id="myID" name="myID" data-toggle="tooltip" data-placement="top" data-html="true">
    <option title="Long description Long description Long description Long description Long description Long description Long description Long description Long description Long description Long description">option1</option>
    <option title="Long description Long description Long description Long description Long description Long description Long description Long description Long description Long description Long description">option2</option>
    <option title="Long description Long description Long description Long description Long description Long description Long description Long description Long description Long description Long description">option3</option>
    <option title="Long description Long description Long description Long description Long description Long description Long description Long description Long description Long description Long description">option4</option>
  </select>
</div>

If you have long tooltips, or you want to use html within the tooltip:

<div class="form-group">
<label for="myID">Test</label>
  <select class="form-control" id="myID" name="myID" data-toggle="tooltip" data-placement="top" data-html="true">
    <option>option1</option>
    <option>option2</option>
    <option>option3</option>
    <option>option4</option>
  </select>
</div>

<script>
$('#myID').tooltip({'trigger':'focus', 'title': 'This is my tooltip. You can use <b>HTML</b>.'});
</script>

I created a JSFiddle: https://jsfiddle/15o0t2ju/1/

you can change data-placement="top" to bottom, left, right. check doc: https://www.w3schools./bootstrap/bootstrap_tooltip.asp

Please see the below example for adding ment/tooltip for each option using bootstrap.

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});

<select class="selectpicker" multiple="">
<option value="option1" data-toggle="tooltip" data-container="#tooltip_container" title="ment for option1">option1</option>
<option value="option2" data-toggle="tooltip" data-container="#tooltip_container" title="ment for option2">option2</option>
<option value="option3" data-toggle="tooltip" data-container="#tooltip_container" title="ment for option3">option3</option>
<option value="option4" data-toggle="tooltip" data-container="#tooltip_container" title="ment for option4">option4</option>
</select>
<div id="tooltip_container"></div>
</div>
<div class="col-sm-4"></div>
</div>
</div>
<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>