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.

Talipes

Please use code snippet to provide a minimal-reproducible-example. So, people can run your codes and help to debug easily. – Leia

Thanks @ikhvjs. How to do that ? I never did that. Even I have some PHP WordPress code. Thanks. – Talipes

Have a look at the link I provided and there is some guide to teach you to make one. – Leia

Thanks @ikhvjs. I tried to implement Code snippet. But I think it is not enough. Thanks. – Talipes

You should try to share some more HTML from your WordPress code. – Leia

Thanks @ikhvjs. I added more HTML code. – Talipes

Can you add some sample data in your table to reproduce the error in the snippet? – Leia

Thanks @ikhvjs. I added 3 images of the issue. I hope these can help you. Thanks. – Talipes

Ah...Can you please add some sample data from your API? You can mask the data with some random string. – Leia

Thanks @ikhvjs. Here is some sample data { "1": [ "Matt McClelland", 0, [ "35-44", "Turramurra Rotary" ] ], "7": [ "tony Mc", 2, [ "0-17", "Turramurra Rotary" ] ], "10": [ "MatthewMuhammad Foysal", 1, [ "", "Turramurra Rotary" ] ] } – Talipes

@ikhvjs. But the issue not in Data. I need to remove the Tooltip. Tooltip is not disappearing after selection of Value. Thanks. – Talipes

Can you create a working snippet (or fixing the existing one) that reproduce the issue? – Kennethkennett

Thanks @MoshFeu. Actually I don't know how to create working snippet. I tired but failed. Even these codes depends on AJAX call. Thanks. – Talipes

You can see how jsfiddle handles fetch here: jsfiddle.net/moshfeu/3hrupdn1/22 and in the docs. – Kennethkennett

Thanks @MoshFeu. Actually my issue is with Tooltips. Tooltip appear nicely. But it is not disappearing after selection of a value. You can see Third image. Thanks. – Talipes

I understand but in order to investigate it would easy to get a real demo and play with it and try thing, this is how it works best for me. – Kennethkennett

Thanks @MoshFeu. I tried to copy your jsfiddle and replicate my issue. But Tooltip is not working here. jsfiddle.net/abufoysal/6uc7msx4/13. Thanks. – Talipes

@MoshFeu. Could you please integrate jQuery UI Tooltip(jqueryui.com/tooltip) with your jsfiddle. Thanks. – Talipes

@ikhvjs, I created a jsfiddle. jsfiddle.net/abufoysal/6uc7msx4/16 – Talipes

@abuabu, it is good that you create a jsfiddle, but somehow it doesn't reproduce your issue with the table tooltip pop up. I cannot solve it for you. You may raise your bounty to let someone else to help you. – Leia

Thanks @ikhvjs. I am not so expert about jsfiddile. I am still trying to reproduce my issue through jsfiddle. You can check it now. I already raised my bounty to let someone else to help me. Thanks. – Talipes

@abuabu, some tips: if this is very important to you, try to raise to 300 or more. :) – Leia

Thanks @ikhvjs. I am going to hire someone. Thanks. – Talipes

@ikhvjs. Previously I used +50. Is it possible to raise to 300 now ? – Talipes

@abuabu, answer you here – Leia

@abuabu if onkar's answer doesn't work for you, let me know and I'll give it another shot. – Kennethkennett

Thanks @MoshFeu. I was trying in another way. But I am failed. Now I am trying onkar's answer. But this is not working also. – Talipes

Answer 1

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

Try this script. It may help you.

Corinnecorinth

Thanks @Saeed Ahmed. I would like to close, remove or destroy Tooltip. Thanks – Talipes

#35501008 Check the link – Corinnecorinth

Thanks @Saeed Ahmed. Actually my issue is after click on a value I would like to close the ToolTip. Thanks. – Talipes

try .tooltip('close'), depends on what tooltip you use – Biblicist

Thanks @BoBiTza. This is not working. Thanks. – Talipes

Thanks @SaeedAhmed. Your solution is not working. Thanks. – Talipes

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.

Schaefer

Thanks @onkar ruikar. I am not getting any output if I use your first solution. I am getting error Error: cannot call methods on tooltip prior to initialization; attempted to call method 'close' if I use your second solution and Tooltip is also not closing. Did you check my jsfiddle (jsfiddle.net/abufoysal/6uc7msx4/16) ? Thanks. – Talipes

You don't have to register tooltips inside selectEle.on("select2:opening", function (e). You can register them at top level. Like in this corrected JsFiddle. If you do it like in my jsfiddle then you won't need to close tooltips yourself. – Schaefer

Thanks @onkar ruikar. I checked your JSfiddle. But there is no Tooltip. Could you please display and close tooltip in your jsfiddle ? Thanks. – Talipes

I tried with register tooltip at top level. But it is not working. Thanks. – Talipes

I've fixed it on JSFiddle. There tooltip doesn't show up quickly. keep hovering over options till it shows up. I've updated the answer – Schaefer

Thanks @onkar ruikar. I can't see any tooltip in your jsfiddle. i.stack.imgur.com/mv4BI.png – Talipes

I used your code in this way but it is not working also. jsfiddle.net/abufoysal/smd0cw78 – Talipes

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

});

Megmega