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?
Share Improve this question edited Sep 7, 2018 at 9:10 Isma 15.2k5 gold badges41 silver badges54 bronze badges asked Jul 7, 2015 at 13:37 JohnnyDinnerJohnnyDinner 671 silver badge9 bronze badges5 Answers
Reset to default 4You 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'];