工具提示未使用 Select2 关闭答案

【问题标题】：ToolTip is not closing with Select2工具提示未使用 Select2 关闭
【发布时间】：2022-02-17 21:55:27
【问题描述】：

我正在使用jQuery UI 工具提示和Select2。我的代码如下。

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

选择值后工具提示未关闭。

我在控制台中收到以下错误消息。

$(".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/select2@4.1.0-rc.0/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>

问题的三种状态。

第一个状态，当我点击 td 并显示 select2 下拉菜单时。

第二个状态，当我将鼠标悬停在 select2 下拉列表的值上并显示工具提示时。

第三状态，当我单击 select2 的值并选择了该值但工具提示仍在显示时。我需要 close、remove 或 destroy 工具提示。我也可以在控制台中看到一条错误消息。

我正在尝试复制我的问题here。但是我对 jsfiddle 不是那么专家，这就是为什么我不能正确地做到这一点。

【问题讨论】：

请使用code snippet 提供minimal-reproducible-example。因此，人们可以运行您的代码并帮助轻松调试。
看看我提供的链接，有一些指南可以教你制作。
您能否创建一个工作 sn-p（或修复现有的）来重现该问题？
您可以在此处查看 jsfiddle 如何处理 fetch：jsfiddle.net/moshfeu/3hrupdn1/22 和 docs。
我明白，但为了调查，很容易获得一个真正的演示并玩它并尝试一下，这对我来说是最有效的。

标签： javascript jquery jquery-select2 jquery-ui-tooltip

【解决方案1】：

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

试试这个脚本。它可能会帮助你。

【讨论】：

感谢@Saeed Ahmed。我想close、remove 或 destroy 工具提示。谢谢
stackoverflow.com/questions/35500508/…查看链接
感谢@Saeed Ahmed。实际上我的问题是点击一个值后我想关闭ToolTip。谢谢。
试试 .tooltip('close')，取决于你使用什么工具提示
谢谢@BoBiTza。这是行不通的。谢谢。

【解决方案2】：

您只在一个选项上创建工具提示，并试图关闭所有选项的工具提示。所以其他没有工具提示的选项会抛出错误cannot call methods on tooltip prior to initialization; attempted to call method 'close'

我已将其修复在 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) {}
  });
}

注意：您可能需要处理更多select2 events。在 JsFiddle 上显示工具提示需要一些时间，不知道为什么。继续悬停在元素上。

【讨论】：

谢谢@onkar ruikar。如果我使用您的第一个解决方案，我不会得到任何输出。如果我使用您的第二个解决方案并且工具提示也没有关闭，我会收到错误 Error: cannot call methods on tooltip prior to initialization; attempted to call method 'close'。你检查我的 jsfiddle (jsfiddle.net/abufoysal/6uc7msx4/16) 了吗？谢谢。
您不必在selectEle.on("select2:opening", function (e) 中注册工具提示。您可以在顶层注册它们。就像在这个更正的JsFiddle 中一样。如果你像我的 jsfiddle 那样做，那么你就不需要自己关闭工具提示了。
谢谢@onkar ruikar。我检查了你的 JSfiddle。但是没有工具提示。您能否在您的 jsfiddle 中显示并关闭工具提示？谢谢。
我尝试在顶层使用注册工具提示。但它不起作用。谢谢。
我已将其修复为 JSFiddle。工具提示不会很快出现。继续悬停在选项上，直到它出现。我已经更新了答案

【解决方案3】：

您正在调用关闭工具提示方法，而它尚未被声明这样做的正确方法可能是创建一个 js 事件并在您的 select2 准备好时调度它。

一个简单的解决方法:)

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

});

【讨论】：