Uncaught Error in jQuery UI ToolTip with Select2

Question

I am using jQuery UI ToolTip with Select2. My code is like below.

let selectEle = cellEle.children("select").select2({
    //more code here
});

selectEle.on("select2:opening", function (e) {
            $(document).on('hover', '.select2-results__option', function () {           
              $(this).tooltip({
                position: {
                  my: "center bottom-20",
                  at: "center top",
                  using: function( position, feedback ) {
                    $(this).css(position);
                    var txt = $(this).text();
                    $(this).html(txt);
                    $( "<div>" )
                      .addClass( "arrow" )
                      .addClass( feedback.vertical )
                      .addClass( feedback.horizontal )
                      .appendTo( this );
                  }
                }
              });
            });
          });

selectEle.on("select2:closing", function (e) { 
  $('.select2-results__option').tooltip('close');
});

But I am getting Uncaught Error: cannot call methods on tooltip prior to initialization; attempted to call method 'close'.

Answer 1

You could use this:

$('.select2-results__option').hide();

instead of :

$('.select2-results__option').tooltip('close');

and keep it in mind that all of your jquery code should be in $(document).ready(function () { // here }) function like this:

$(document).ready(function () {
let selectEle = cellEle.children("select").select2({
    //more code here
});

selectEle.on("select2:opening", function (e) {
            $(document).on('hover', '.select2-results__option', function () {           
              $(this).tooltip({
                position: {
                  my: "center bottom-20",
                  at: "center top",
                  using: function( position, feedback ) {
                    $(this).css(position);
                    var txt = $(this).text();
                    $(this).html(txt);
                    $( "<div>" )
                      .addClass( "arrow" )
                      .addClass( feedback.vertical )
                      .addClass( feedback.horizontal )
                      .appendTo( this );
                  }
                }
              });
            });
          });

   selectEle.on("select2:closing", function (e) { 
      $('.select2-results__option').hide();
   });
})