Javascript 如何使用引导选择在每个选择选项上添加工具提示

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

html

js

---

请在此处检查此工作代码，并以此作为参考

$(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>

Bootstrap select使用s创建新的DOM元素，以便呈现下拉项

代码的问题是工具提示附加到原始选项元素。 但它们必须附加到新创建的元素

但是，我们应该只在启动选择插件初始化之后才附加它们，这样我们就可以利用插件文档中的loaded.bs.select事件：该事件在选择插件初始化之后激发。-

此外，插件没有从选项元素复制所有属性，因此列表项不会设置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'
          });

       });

    });

});

---

Fiddle:。

使用以下代码，无需在js中处理。 使用title attr on选项指定选中后要在按钮上显示的文本，如果未指定，则按钮上的工具提示将出现问题

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

---

在最新的boostrap select 1.13.14中，的可能副本不起作用。代码中的$lis变量未定义，因为它们可能更改了变量结构/名称。尝试改用$element[0]，但也没有帮助。更新。正在寻找其他替代方案。找到了以下内容：var$lis=$el.data'selectpicker.selectpicker.main.elements；：此代码在最新的引导选择1.13.14中不起作用。你可以把你的代码放在我上面回答的小提琴里。奇怪的仅适用于多次选择，不适用于常规选择。

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

       });

    });

});

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