如何使用 bootstrap-select 在每个选择选项上添加工具提示

Question

我正在尝试使用 bootstrap-select 向每个选择选项添加工具提示。在我检查时，select-js 似乎将 select 标签转换为 ul。我不知道这是我的代码不起作用的原因。

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

更新 2021-06-25

似乎对于版本1.13.x及更高版本，解决方案是使用：

$('#select').data('selectpicker').selectpicker.main.elements- 返回li您可以使用的元素数组。

如该插件的 Github 问题页面所述：

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

Bootstrap-select创建新的 DOM 元素（<ul>带有<li>s 的元素）以呈现下拉项。

您的代码的问题在于工具提示附加到原始option元素。但是它们必须附加到新创建的元素上。

但是，我们应该仅在Bootstrap-select插件初始化后附加它们，以便我们可以利用该loaded.bs.select事件（来自插件文档：“此事件在选择初始化后触发。 ” - https://silviomoreto.github.io/ bootstrap-select/options/#events）。

此外，插件不会从option元素中复制所有属性，因此列表项不会设置该title属性。我们必须手动复制此属性。

为了找到插件创建的列表项，我们可以利用.data('selectpicker')附加到原始select元素的属性，并包含我们需要的所有数据。列表项在.data('selectpicker').$lis对象中找到。

请检查以下代码：

$(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'
          });
  
       });

    });

});

小提琴：https : //jsfiddle.net/61kbe55z/。