Tooltip or comment for selecting options

Question

I use bootstrap for my dropdown menus. I am wondering if it is possible to add a comment or a tooltip for each parameter that will appear immediately when I hover over it? Each comment is about 20-30 words, so it fits well into the list.

At the moment, I only have a 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 selection. Bootstrap selection is an unordered list of your selection 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>

Run codeHide result

Answer 2

Try it. A working copy is 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>

Run codeHide result

For your example:

<script src="https://ajax.googleapis.com/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>

Run codeHide result

Answer 3

If you have long tooltips or want to use html in a 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 JSFiddle: https://jsfiddle.net/15o0t2ju/1/

you can change the placement of data = "top" down, left, right. check doc: https://www.w3schools.com/bootstrap/bootstrap_tooltip.asp

Answer 4

Please see the example below for adding comments / tips 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="comment for option1">option1</option>
<option value="option2" data-toggle="tooltip" data-container="#tooltip_container" title="comment for option2">option2</option>
<option value="option3" data-toggle="tooltip" data-container="#tooltip_container" title="comment for option3">option3</option>
<option value="option4" data-toggle="tooltip" data-container="#tooltip_container" title="comment for option4">option4</option>
</select>
<div id="tooltip_container"></div>
</div>
<div class="col-sm-4"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Run codeHide result