Silviomoreto bootstrap-select工具提示选项

Question

Silviomoreto bootstrap-select add选择"display:none"：

它会像这样显示'ul'：

我动态更改此选项：

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

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

Answer 1

您需要将工具提示添加到每个生成的li元素，而不是option元素（初始化bootstrap-select之后）。您可以使用li访问生成的data('selectpicker')元素。

$('#selectID').data('selectpicker').$lis.attr('title', 'New Title').tooltip();

Answer 2

工具提示不能与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();
});

Answer 3

这是一种稍微不同的方法，它会将工具提示属性从选项中抽出并将它们放到引导行上

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

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

Answer 4

我得到了Sovtek的答案，并进行了一些修改，这次采用了选项中定义的title属性，并将其设置为生成的Bootstrap-select的标题 元素：

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]);
});

Answer 5

RBILLC 的回答对我有用，但对于那些不想使用 js 解决方案的人，您可以使用 data-content (ref) 属性将引导程序 title 插入您的元素 {{ 1}}/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> 输入将由 bootstrap-select 清理，因此在上面的示例中，您需要将 data-content 标签上的 title 属性列入白名单（ ref)

div