[英]How to add tooltip on each select option with bootstrap-select
I am trying to add tooltip to each select option with bootstrap-select.我正在尝试使用 bootstrap-select 向每个选择选项添加工具提示。 While I inspecting it seems the select-js converting the select tag to ul.
在我检查时,select-js 似乎将 select 标签转换为 ul。 I have no idea this is the reason for my code is not working.
我不知道这是我的代码不起作用的原因。
html 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 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>
It seems that for versions 1.13.x
and higher, the solution is to use:似乎对于
1.13.x
及更高版本,解决方案是使用:
$('#select').data('selectpicker').selectpicker.main.elements
- which returns an array of li
elements that you can use. $('#select').data('selectpicker').selectpicker.main.elements
- 它返回一个你可以使用的li
元素数组。
as described on the Github issues page of this plugin:如该插件的 Github 问题页面所述:
https://github.com/snapappointments/bootstrap-select/issues/2561#issuecomment-787112874 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. Bootstrap-select
创建新的 DOM 元素(带有<li>
的<ul>
)以呈现下拉项。
The problem with your code is that the tooltips are attached to the original option
elements.您的代码的问题在于工具提示附加到原始
option
元素。 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 ).但是,我们应该只在
Bootstrap-select
插件初始化后附加它们,这样我们就可以利用loaded.bs.select
事件(来自插件文档:“这个事件在选择初始化后触发。 ” -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.此外,插件不会从
option
元素中复制所有属性,因此列表项不会设置title
属性。 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.为了找到插件创建的列表项,我们可以利用
.data('selectpicker')
属性,该属性附加到我们的原始select
元素中,并包含我们需要的所有数据。 The list items are found in .data('selectpicker').$lis
object.列表项位于
.data('selectpicker').$lis
对象中。
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/ .小提琴: https : //jsfiddle.net/61kbe55z/ 。
Use the following code, no need to handle in js.使用如下代码,无需在js中处理。 Use title attr on option to specify the text to be displayed on button after selected, if not specified will face issues with tooltip on button.
使用 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>
Check this working code here please take this as reference.在此处检查此工作代码,请以此作为参考。
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.