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