I have achieved adding & showing bootstrap tooltip on bootstrap select options using this source. How to add tooltip on each select option with bootstrap-select
on static setup all working fine
The problem is with ajax setup. I am able to get tooltip on first dropdown select. When I try to select for same select dropdown for second time it does not show tooltip and same behavior with next select dropdown
eg. 'imudetails' select and onwards.
I have 5 select dropdown select which gets activate one after another using on change methods given below and I have tired adding $('.selectpickerdrop').selectpicker('refresh');
at bottom of ajax success function but the behavior is still same. It only works for once.
I am using Bootstrap-select v-1.13.18
with bootstrap tooltip, bootstrap version - 4.x
and popper.js-1.16.1
jquery 3.x
and jquery-ui 1.12.1
. Ready to connect if additional information required.
html
<select class="selectpickerdrop form-control" data-show-subtext="true" data-live-search="true" data-size="5" id="marketdetails" name="marketdetails"></select>
select on change functions
//------------------------------------------------------------------------------------------
$("#marketdetails").on('change', function () {
parentAttributeValue = $(this).find('option:selected').attr('value');
if (parentAttributeValue != 0) {
portfolioTypeId = 'NT_ID_007';
control = $('#mudetails');
control.html('');
GetHierarchyDetails(portfolioTypeId, parentAttributeValue, control);
if (RecordCount > 0) {
$("#mudetails").val("0");
$('#mudetails').attr('disabled', false);
$("#budetails").val("0");
$('#budetails').attr('disabled', true);
$("#sbudetails").val("0");
$('#sbudetails').attr('disabled', true);
$("#sbu2details").val("0");
$('#sbu2details').attr('disabled', true);
$('.selectpickerdrop').selectpicker('refresh');
}
}
else {
$("#mudetails").val("0");
$('#mudetails').attr('disabled', true);
$("#budetails").val("0");
$('#budetails').attr('disabled', true);
$("#sbudetails").val("0");
$('#sbudetails').attr('disabled', true);
$("#sbu2details").val("0");
$('#sbu2details').attr('disabled', true);
$('.selectpickerdrop').selectpicker('refresh');
}
$('.selectpickerdrop').selectpicker('refresh');
});
$("#mudetails").on('change', function () {
parentAttributeValue = $(this).find('option:selected').attr('value');
if (parentAttributeValue != 0) {
portfolioTypeId = 'NT_ID_001';
control = $('#budetails');
control.html('');
GetHierarchyDetails(portfolioTypeId, parentAttributeValue, control);
if (RecordCount > 0) {
$("#budetails").val("0");
$('#budetails').attr('disabled', false);
$("#sbudetails").val("0");
$('#sbudetails').attr('disabled', true);
$("#sbu2details").val("0");
$('#sbu2details').attr('disabled', true);
$('.selectpickerdrop').selectpicker('refresh');
}
}
else {
$("#budetails").val("0");
$('#budetails').attr('disabled', true);
$("#sbudetails").val("0");
$('#sbudetails').attr('disabled', true);
$("#sbu2details").val("0");
$('#sbu2details').attr('disabled', true);
$('.selectpickerdrop').selectpicker('refresh');
}
});
$("#budetails").on('change', function () {
parentAttributeValue = $(this).find('option:selected').attr('value');
if (parentAttributeValue != 0) {
portfolioTypeId = 'NT_ID_004';
control = $('#sbudetails');
control.html('');
GetHierarchyDetails(portfolioTypeId, parentAttributeValue, control);
if (RecordCount > 0) {
$("#sbudetails").val("0");
$('#sbudetails').attr('disabled', false);
$("#sbu2details").val("0");
$('#sbu2details').attr('disabled', true);
$('.selectpickerdrop').selectpicker('refresh');
}
}
else {
$("#sbudetails").val("0");
$('#sbudetails').attr('disabled', true);
$("#sbu2details").val("0");
$('#sbu2details').attr('disabled', true);
$('.selectpickerdrop').selectpicker('refresh');
}
});
$("#sbudetails").on('change', function () {
parentAttributeValue = $(this).find('option:selected').attr('value');
if (parentAttributeValue != 0) {
portfolioTypeId = 'NT_ID_017';
control = $('#sbu2details');
control.html('');
GetHierarchyDetails(portfolioTypeId, parentAttributeValue, control);
if (RecordCount > 0) {
$("#sbu2details").val("0");
$('#sbu2details').attr('disabled', false);
$('.selectpickerdrop').selectpicker('refresh');
}
}
else {
$("#sbu2details").val("0");
$('#sbu2details').attr('disabled', true);
$('.selectpickerdrop').selectpicker('refresh');
}
});
// ajax call function
function GetHierarchyDetails(portfolioTypeId, parentAttributeValue, control) {
//$('.tooltip-inner').remove();
//$('.tooltip-arrow').remove();
RecordCount = 0;
$.ajax({
type: "POST",
dataType: "json",
url: "../../UserInterfaceV2/AL/Transaction.asmx/GetHierarchyDetails",
data: JSON.stringify({ portfolioTypeId: portfolioTypeId, parentAttributeValue: parentAttributeValue }),
async: false,
contentType: 'application/json; charset=utf-8',
success: function (data) {
//GetToolTip();
data = $.parseJSON(data.d);
if (data.length > 0) {
control.empty();
control.append($("<option></option>").val("0").html("Select"));
for (var index = 0; index < data.length; index++) {
{
if (data[index].PortfolioId && data[index].PortfolioId != '' && data[index].PortfolioName && data[index].PortfolioName != ''
&& data[index].PortfolioName != null && data[index].PortfolioId != null)
{
control.append($('<option title="' + data[index].PortfolioName + ' [' + data[index].PortfolioId + ']'
+ '">'+'</option>').val(data[index].PortfolioId).html(data[index].PortfolioName
+ ' [' + data[index].PortfolioId + ']'));
RecordCount++;
}
}
}
};
$('.selectpickerdrop').selectpicker('refresh');
},
error: function (data) {
alert('Oops! Something went wrong, could you please try again!');
}
});
}
// Bootstrap select tooltip enable
$('.selectpickerdrop').selectpicker({
liveSearch: true
}).on('loaded.bs.select', function (e) {
var $el = $(this);
var $lis = $el.data('selectpicker').selectpicker.main.elements;
$($lis).each(function (i) {
var tooltip_title = $el.find('option').eq(i).attr('title');
$(this).tooltip({
'title': tooltip_title || '',
'placement': 'top',
//'selector': '.selectpicker',
container: $(this)
});
});
});
Since the dropdowns are populated via ajax, using the loaded.bs.select
event won't work, because when this event is triggered, the ajax request is not completed (or not yet started).
If you are already using .selectpicker('refresh')
, we can take advantage of refreshed.bs.select
event and attach the tooltips in the callback of this event:
$('.selectpickerdrop').selectpicker({
liveSearch: true
}).on('loaded.bs.select', function (e) {
// append static tooltips
})
.on('refreshed.bs.select', function(e) {
// append dynamic tooltips
});
Fiddle: https://jsfiddle.net/wskm4edz/