ToolTip is not closing with Select2

Question

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

$(".volunteer").on("click", function (event) {

    function templateSelection(data_format) {
        if (!data_format.id) { return data_format.text; }        
        var output = $('<span class="tooltip" title="' + data_format.title + '">' + data_format.text + '</span>');
        return output;
    };

    function resultfucntion(state) {
        if (!state.id) { return state.text;}
        var $state = $('<span class="tooltip" title="' + state.title + '">' + state.text + '('+ state.text1 +')</span>');
        return $state;
    };

    var orga_id = $('#orga').val();

    var cellEle = $(this);

    // Populate select element
    cellEle.html(`<select multiple="multiple"></select>`);

    // Initialise select2
    let selectEle = cellEle.children("select").select2({
        ajax: {
            url: "/wp-admin/admin-ajax.php",
            data: function (params) {
                return {
                    action: 'get_data',
                    search: params.term,
                    orga_id: orga_id,
                };
            },
            processResults: function (data) {                
                var options = [];
                if (data) {
                    $.each(data, function (index, text) {
                    var user_data = '<table> \
                        <tr> \
                        <td>Organisation</td> \
                        <td>'+text[2][1]+'</td> \
                        </tr> \
                        <tr> \
                        <td>Age</td> \
                        <td>'+ text[2][0]+'</td> \
                        </tr> \
                    </table>';                 
                        options.push({ id: index, text: text[0], text1: text[1], title: user_data });                
                    });
                }
                return {
                    results: options,
                    more: false
                };
            },
        },
        templateSelection: templateSelection,
        templateResult: resultfucntion,
    });
});

selectEle.on("select2:opening", function (e) {
  $(document).on("mouseenter", ".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');  // This code is not working.
    $('.select2-results__option .tooltip').tooltip('close');  // This code is not working.
});

selectEle.on("select2:select", function () {
    $(".select2-results__option").tooltip("close");   // This code is not working.
    $(".select2-results__option .tooltip").tooltip("close");  // This code is not working.
});

After selection of a value ToolTip is not closing.

I am getting below error message in console.

$(".volunteer").on("click", function (event) {

    function templateSelection(data_format) {
        if (!data_format.id) { return data_format.text; }        
        var output = $('<span class="tooltip" title="' + data_format.title + '">' + data_format.text + '</span>');
        return output;
    };

    function resultfucntion(state) {
        if (!state.id) { return state.text;}
        var $state = $('<span class="tooltip" title="' + state.title + '">' + state.text + '('+ state.text1 +')</span>');
        return $state;
    };

    var orga_id = $('#orga').val();

    var cellEle = $(this);

    // Populate select element
    cellEle.html(`<select multiple="multiple"></select>`);

    // Initialise select2
    let selectEle = cellEle.children("select").select2({
        ajax: {
            url: "/wp-admin/admin-ajax.php",
            data: function (params) {
                return {
                    action: 'get_data',
                    search: params.term,
                    orga_id: orga_id,
                };
            },
            processResults: function (data) {                
                var options = [];
                if (data) {
                    $.each(data, function (index, text) {
                    var user_data = '<table> \
                        <tr> \
                        <td>Organisation</td> \
                        <td>'+text[2][1]+'</td> \
                        </tr> \
                        <tr> \
                        <td>Age</td> \
                        <td>'+ text[2][0]+'</td> \
                        </tr> \
                    </table>';                 
                        options.push({ id: index, text: text[0], text1: text[1], title: user_data });                
                    });
                }
                return {
                    results: options,
                    more: false
                };
            },
        },
        templateSelection: templateSelection,
        templateResult: resultfucntion,
    });
});

selectEle.on("select2:opening", function (e) {
  $(document).on("mouseenter", ".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');  // This code is not working.
    $('.select2-results__option .tooltip').tooltip('close');  // This code is not working.
});

selectEle.on("select2:select", function () {
    $(".select2-results__option").tooltip("close");   // This code is not working.
    $(".select2-results__option .tooltip").tooltip("close");  // This code is not working.
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>


<table style="text-align:left;min-width:800px;margin-top: 0 !important;">
                    <tbody><tr>
                    <th style="min-width:100px">Task <a href="/team/?task=&amp;team=turramurra-team">+</a></th>
                    <th style="min-width:150px">Time</th>
                    <th style="min-width:180px">volunteers</th>
                    <th style="width:50%">Comment</th></tr><tr>
                    <td><a href="/team/?task=test-1&amp;team=turramurra-team" title="Edit this task">test 1</a></td>
                    <td>09:00 - 12:00</td>
                    <td class="volunteer" id="1485"></td>
                    <td><p>hello</p>
</td>
                    </tr><tr>
                    <td><a href="/team/?task=test2&amp;team=turramurra-team" title="Edit this task">test2</a></td>
                    <td>09:00 - 12:00</td>
                    <td class="volunteer" id="1486"></td>
                    <td><p>test</p>
</td>
                    </tr></tbody></table>

Three state of the issue.

First state when I click on td and select2 drop down is displaying.

Second state when I hove over a value of select2 drop down and ToolTip is displaying.

Third state when I click on a value of select2 and that value is selected but Tooltip still displaying. I need to close, remove or destroy the ToolTip. I can see an error message in console also.

I am trying to replicate my issue here. But I am not so expert about jsfiddle that's why I couldn't do it properly.

Answer 1

 <script>
        $(function() {
            $('[data-toggle="tooltip"]').tooltip()
        });
    </script>

Try this script. It may help you.

Answer 2

You are creating tooltip on only one option and trying to close tooltips on all the options. So other options without tooltip are throwing the error cannot call methods on tooltip prior to initialization; attempted to call method 'close'

I've fixed it on JSFiddle

 $('.js-data-example-ajax').on("select2:close", e =>
    closeTooltips()
  );
  $('.js-data-example-ajax').on("select2:selecting", e =>
    closeTooltips()
  );

function closeTooltips() {
  $('.select2-results__option').each(function() {
    try {
      $(this).tooltip('close');
    } catch (e) {}
  });
}

Note: You may have to handle more select2 events.On JsFiddle it takes time for tooltip to showup don't know why. Keep hovering over elements.

Answer 3

You are calling close tooltip method while it hasn't been declared yet The correct way of doing this maybe is to create a js event and dispatch it when your select2 is ready.

A simple workaround :)

selectEle.on("select2:opening", function (e) {
$(document).on("mouseenter", ".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.off("select2:closing").on("select2:closing", function (e) {
        $('.select2-results__option').tooltip('close');  // This code is not working.
        $('.select2-results__option .tooltip').tooltip('close');  // This code is not     working.
    });

    selectEle.on("select2:select", function () {
        $(".select2-results__option").tooltip("close");   // This code is not working.
        $(".select2-results__option .tooltip").tooltip("close");  // This code is not working.
    });
});

});