How to add tooltip on each select option with bootstrap-select

Question

I am trying to add tooltip to each select option with bootstrap-select. While I inspecting it seems the select-js converting the select tag to ul. I have no idea this is the reason for my code is not working.

html

<div class="form-group">
    <label  for="email">Network : </label>
    <select  id="basic" class="selectpicker form-control" >
        <option value="0" data-toggle="tooltip" title="Finding your IMEI number">One</option>
        <option value="1" data-toggle="tooltip" title="Next title" >Two</option>
        <option value="2" >Three</option>
        <option  value="3">Four</option>
        <option value="4">Five</option>
        <option value="5">Six</option>
    </select>
</div>

js

<script>
$(document).ready(function () {
  var mySelect = $('#first-disabled2');

  $('#special').on('click', function () {
    mySelect.find('option:selected').attr('disabled', 'disabled');
    mySelect.selectpicker('refresh');
  });

  var $basic2 = $('#basic2').selectpicker({
    liveSearch: true,
    maxOptions: 1
  });
});
</script>

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

Orgulous

Possible duplicate of Bootstrap 2 tooltips on html select's option – Rhett

Answer 1

Update 2021-06-25

It seems that for versions 1.13.x and higher, the solution is to use:

$('#select').data('selectpicker').selectpicker.main.elements - which returns an array of li elements that you can use.

as described on the Github issues page of this plugin:

https://github.com/snapappointments/bootstrap-select/issues/2561#issuecomment-787112874

---

Bootstrap-select creates new DOM elements (an <ul> with <li>s) in order to render the dropdown items.

The problem with your code is that the tooltips are attached to the original option elements. But they have to be attached to the newly created elements.

However, we should attach them only after the Bootstrap-select plugin is initialized, so we can take advantage of the loaded.bs.select event (From the plugin docs: "This event fires after the select has been initialized." - https://silviomoreto.github.io/bootstrap-select/options/#events).

Also, the plugin is not copying all the attributes from the option elements, so the list items will not have set the title attribute. We have to copy this attribute manually.

In order to find the list items created by the plugin, we can take advantage of the .data('selectpicker') attribute, which is appended to our original select element, and contains all the data that we need. The list items are found in .data('selectpicker').$lis object.

Please check the code below:

$(document).ready(function () {

    $('#basic').selectpicker({
     liveSearch: true
     // other options...
    }).on('loaded.bs.select', function(e){

      // save the element
      var $el = $(this);

      // the list items with the options
      var $lis = $el.data('selectpicker').$lis;

      $lis.each(function(i) {
        
          // get the title from the option
          var tooltip_title = $el.find('option').eq(i).attr('title');

          $(this).tooltip({
             'title': tooltip_title,
             'placement': 'top'
          });
  
       });

    });

});

Fiddle: https://jsfiddle.net/61kbe55z/.

Haugen

Does not work in latest boostrap-select 1.13.14. The $lis variable of your code becomes undefined as they might have changed the variable structure/names. Tried to use $element[0] instead but that also did not help. Updated JSFiddle. Looking for other alternatives. – Volauvent

found something with: var $lis = $el.data('selectpicker').selectpicker.main.elements;: jsfiddle.net/tbdxs5jp/7 – Haugen

It works only when we have static title in options. If we are loading dynamic values into title . it does not shows tooltip. Has anyone checked with dynamic values? – Quadruplicate

@amar ghodke, what version do you use? can you please provide a fiddle with a minimal reproducible example so that I can inspect the problem in detail? – Haugen

cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/… . fiddle link jsfiddle.net/xvhq7j4m Please let me know if its accessible to you. – Quadruplicate

jsfiddle.net/xvhq7j4m/6 one more updated link @Haugen – Quadruplicate

In the initial solution, the tooltips are attached in the loaded.bs.select event, but when this event is triggered, the ajax request is not completed. Since you are already using .selectpicker('refresh'), we can take advantage of refreshed.bs.select event and attach the tooltips in the callback of this event - fiddle: jsfiddle.net/wskm4edz – Haugen

Answer 2

Use the following code, no need to handle in js. Use title attr on option to specify the text to be displayed on button after selected, if not specified will face issues with tooltip on button.

<div class="form-group">
    <label  for="email">Network : </label>
    <select  id="basic" class="selectpicker form-control" >
        <option value="0" title="one"><span data-toggle="tooltip" title="Finding your IMEI number">One</span></option>
        <option value="1" title="two"><span data-toggle="tooltip" title="Next title" >Two</span></option>
        <option value="2" >Three</option>
        <option  value="3">Four</option>
        <option value="4">Five</option>
        <option value="5">Six</option>
    </select>
</div>

Pedroza

This code does not work in latest bootstrap-select 1.13.14. You may just replace your code in my fiddle mentioned in above answer. Strange! – Volauvent

Answer 3

Check this working code here please take this as reference.

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
  });
<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>

<div class="container" style="margin-top:80px;">
            <div class="row">
                <div class="col-sm-4"></div>
                <div class="col-sm-4">
                    <select name="opts" id="opts" class="form-control" multiple>
                        <option value="1" data-toggle="tooltip" data-container="#tooltip_container" title="tooltip 1">option 1</option>
                        <option value="2" data-toggle="tooltip" data-container="#tooltip_container" title="tooltip 2">option 2</option>
                        <option value="3" data-toggle="tooltip" data-container="#tooltip_container" title="tooltip 3">option 3</option>
                        <option value="4" data-toggle="tooltip" data-container="#tooltip_container" title="tooltip 4">option 4</option>
                        <option value="5" data-toggle="tooltip" data-container="#tooltip_container" title="tooltip 5">option 5</option>
                        <option value="6" data-toggle="tooltip" data-container="#tooltip_container" title="tooltip 6">option 6</option>
                    </select>
                    <div id="tooltip_container"></div>
                </div>
                <div class="col-sm-4"></div>
            </div>

Misha

Only works for multiple select, not regular select. – Logion