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>

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/.

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>