5

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>
Vikas Yadav
  • 3,094
  • 2
  • 20
  • 21
ub_303
  • 310
  • 1
  • 8
  • 22
  • 1
    Possible duplicate of [Bootstrap 2 tooltips on html select's option](https://stackoverflow.com/questions/29964891/bootstrap-2-tooltips-on-html-selects-option) – Ganesh Yadav Dec 06 '17 at 07:42

3 Answers3

7

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

andreivictor
  • 7,628
  • 3
  • 48
  • 75
  • 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](https://jsfiddle.net/saphemlock/txbvjmy4/19/). Looking for other alternatives. – sanpat Feb 03 '21 at 20:57
  • 1
    found something with: `var $lis = $el.data('selectpicker').selectpicker.main.elements;`: https://jsfiddle.net/tbdxs5jp/7/ – andreivictor Feb 04 '21 at 07:38
  • 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? – amar ghodke Jul 22 '21 at 05:50
  • @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? – andreivictor Jul 22 '21 at 06:00
  • https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.js . fiddle link https://jsfiddle.net/xvhq7j4m Please let me know if its accessible to you. – amar ghodke Jul 22 '21 at 06:03
  • https://jsfiddle.net/xvhq7j4m/6/ one more updated link @andreivictor – amar ghodke Jul 22 '21 at 07:20
  • 1
    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: https://jsfiddle.net/wskm4edz/ – andreivictor Jul 24 '21 at 07:15
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>
kabilan pachaiappan
  • 29
  • 7
  • 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! – sanpat Feb 03 '21 at 21:01
-2

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>
vinod gami
  • 77
  • 4