bootstrap-select를 사용하여 각 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 소자 (AN <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>