Silviomoreto bootstrap-select add to select "display:none":

and it make visible 'ul' like this:

I change this select dynamically:

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

How can I dynamically add a tooltip to each option?

Silviomoreto bootstrap-select add to select "display:none":

and it make visible 'ul' like this:

I change this select dynamically:

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

How can I dynamically add a tooltip to each option?

• javascript
• jquery
• twitter-bootstrap

5 Answers 5

You will need to add the tooltip to each generated li element, rather than the option elements (after bootstrap-select is initialized). You can access the generated li elements using data('selectpicker').

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

Tooltip does not work dynamically with bs select.

It gives all select item same value "test", but when move the mouse should be changed.

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

This is a little different way to do it that will pump the tooltip attribute off the options and put them on to the bootstrap rows

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

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

I got Sovtek's answer working with some modification, this time taking the title attribute defined in the option(s) and setting it to the title of the generated Bootstrap-select element:

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

RBILLC's answer worked for me but for those who doesn't want to use js solution, you can use data-content (ref) attribute to insert bootstrap title into your element div/span

For ex:

  <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>

Note: data-content input will be sanitized by bootstrap-select, so in above example, you will need to whitelist title attribute on div tag (ref)

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