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

Bootstrap-selectドロップダウン項目をレンダリングするために、新しいDOM要素（<ul><li>と複数可）を作成します。

コードの問題は、ツールチップが元の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/

以下のコードをご確認ください。

Answer 2

ここでは、この作業コードをチェックし、参照としてこれをご利用ください。

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