bootstrap-select tooltip in ajax setup shows only once

Question

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

    });

});

Answer 1

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 dinamic tooltips
});

Fiddle: https://jsfiddle.net/wskm4edz/