如何使用 bootstrap-select 在每个 select 选项上添加工具提示
How to add tooltip on each select option with bootstrap-select
我正在尝试使用 bootstrap-select 向每个 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>
在此处检查此工作代码,请将其作为参考。
$(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>
2021-06-25更新
似乎对于版本1.13.x
及更高版本,解决方案是使用:
$('#select').data('selectpicker').selectpicker.main.elements
- returns 您可以使用的 li
个元素的数组。
如该插件的 Github 问题页面所述:
https://github.com/snapappointments/bootstrap-select/issues/2561#issuecomment-787112874
Bootstrap-select
创建新的 DOM 元素(<ul>
和 <li>
s)以呈现下拉项。
您的代码存在问题,工具提示附加到原始 option
元素。
但是它们必须附加到新创建的元素上。
但是,我们应该只在 Bootstrap-select
插件初始化后附加它们,这样我们就可以利用 loaded.bs.select
事件(来自插件文档:“This event在 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'
});
});
});
});
Fiddle: https://jsfiddle.net/61kbe55z/.
使用如下代码,无需在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>
我正在尝试使用 bootstrap-select 向每个 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>
在此处检查此工作代码,请将其作为参考。
$(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>
2021-06-25更新
似乎对于版本1.13.x
及更高版本,解决方案是使用:
$('#select').data('selectpicker').selectpicker.main.elements
- returns 您可以使用的 li
个元素的数组。
如该插件的 Github 问题页面所述:
https://github.com/snapappointments/bootstrap-select/issues/2561#issuecomment-787112874
Bootstrap-select
创建新的 DOM 元素(<ul>
和 <li>
s)以呈现下拉项。
您的代码存在问题,工具提示附加到原始 option
元素。
但是它们必须附加到新创建的元素上。
但是,我们应该只在 Bootstrap-select
插件初始化后附加它们,这样我们就可以利用 loaded.bs.select
事件(来自插件文档:“This event在 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'
});
});
});
});
Fiddle: https://jsfiddle.net/61kbe55z/.
使用如下代码,无需在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>