如何使用 bootstrap-select 在每个选择选项上添加工具提示 [英] How to add tooltip on each select option with bootstrap-select

问题描述

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

html

<label for="email">网络:</label><select id="basic" class="selectpicker form-control" ><option value="0" data-toggle="tooltip" title="查找您的IMEI号码">一</option><option value="1" data-toggle="tooltip" title="下一个标题" >两个</option><option value="2" >三</option><option value="3">四</option><option value="4">五</option><option value="5">六</option></选择>

js

<脚本>$(document).ready(function(){$('[data-toggle="tooltip"]').tooltip();});

解决方案

更新 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 元素(

和
• 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({实时搜索:真实//其他选项...}).on('loaded.bs.select', function(e){//保存元素var $el = $(this);//带有选项的列表项var $lis = $el.data('selectpicker').$lis;$lis.each(function(i) {//从选项中获取标题var tooltip_title = $el.find('option').eq(i).attr('title');$(this).tooltip({'title': tooltip_title,'位置':'顶部'});});});});

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

  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>
  

  解决方案

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

  这篇关于如何使用 bootstrap-select 在每个选择选项上添加工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！