Javascript Silviomore要引导，请选择选项上的工具提示

Silviomore要引导选择添加以选择“显示：无”：

它使“ul”可见，如下所示：

我动态更改此选择：

for(var key in value) {
    $(this)
        .append($("<option></option>")
        .attr("value", key)
        .text(value[key])); 
}              
$(this).selectpicker('refresh');

for（变量输入值）{
$（本）
.append（$（“”）
.attr（“值”，键）
.text（值[键]）；
}              
$（this.selectpicker（'refresh'）；

---

如何向每个选项动态添加工具提示？

您需要将工具提示添加到每个生成的

li

元素，而不是

选项

元素（在

引导选择

初始化后）。您可以使用

data（'selectpicker'）

访问生成的

li

元素

---

这是一种稍有不同的方法，它会将tooltip属性从选项中抽出来，并将它们放到引导行中

var tips = [];
$('#selectID option').each(function(){
    tips.push($(this).attr('tooltip'));
});

$('#selectID').data('selectpicker').$lis.each(function(i){
    $(this).attr('title',tips[i]).tooltip() 
});

---

工具提示不能与bs select一起动态工作

它为所有选择项提供相同的值“test”，但移动鼠标时应更改

$('#id').on('shown.bs.select', function () {
    var test = $('selectpicker').selectpicker.current.elements.text();
    $($(this).data('selectpicker').selectpicker.current.elements).attr('title', test ).tooltip();
});

---

我通过一些修改得到了Sovtek的答案，这次使用选项中定义的title属性，并将其设置为生成的引导选择的标题 要素：

---

RBILCC的答案对我来说很有用，但对于那些不想使用js解决方案的人，可以使用

数据内容
（）属性将引导
标题
插入元素
div
/
span

例如：

  <select class="selectpicker">
    <option title="Option with tooltip" data-content="<div title='I am your tooltip'><span>Option with tooltip</span><small class='text-muted'>subtext 1...</small></div>"></option>
    <option data-subtext="subtext 1...">Option with tooltip</option>
  </select>

完全为我工作。我在剑道上使用mvc，并努力添加工具提示。这就是我动态生成工具提示的方式。感谢这个答案：）Var tooltipMap={}；工具提示[“文本”]=“工具提示”//它们是动态生成的$（'id dropdown'）.data（'selectpicker'）.lis.each（函数（）{var li=$（this）；var elementtext=li.find（'span.text'）.text（）；var tooltipString=tooltipMap[elementtext]；if（tooltipString）{li.tooltip({trigger:'hover'，place:'right'，title:tooltipString}；}）；
var tips = [];
$('#mySelectPickerID option').each(function () {
    tips.push($(this).attr('title'));
});

$('.bootstrap-select .dropdown-menu li a span.text').each(function (i) {
    $(this).attr('title', tips[i]);
});

  <select class="selectpicker">
    <option title="Option with tooltip" data-content="<div title='I am your tooltip'><span>Option with tooltip</span><small class='text-muted'>subtext 1...</small></div>"></option>
    <option data-subtext="subtext 1...">Option with tooltip</option>
  </select>

var extendBootstrapSelectSanitizer = $.fn.selectpicker.Constructor.DEFAULTS.whiteList;
// To allow div elements and title attributes on td elements
extendBootstrapSelectSanitizer.div = ['title'];