Bootstrap 引导工具提示不会消失

7rtdyuoh  于 2023-05-21  发布在  Bootstrap
关注(0)|答案(1)|浏览(212)

我有引导工具提示,当用户悬停在他们出现。有时这些工具提示不会消失。在应用程序运行期间,它们将像这样停留在屏幕上。当我切换到应用程序的新屏幕时,它们将保留。我想这可能与创建工具提示的JavaScript有关,所以这里是处理工具提示的函数。

function addTooltips() {
    var myDefaultAllowList = bootstrap.Tooltip.Default.allowList
    myDefaultAllowList.table = []
    myDefaultAllowList.tr = []
    myDefaultAllowList.th = []
    myDefaultAllowList.thead = []
    myDefaultAllowList.tbody = []
    myDefaultAllowList.td = []
    myDefaultAllowList.a = []

    $('[data-toggle="tooltip"]').tooltip();
    $('[data-toggle="popover"]').popover();

    $('[data-bs-toggle="tooltip"]').tooltip({
        trigger: 'hover'
    });
    $('[data-bs-toggle="tooltip"]').on('mouseout', function () {
        $(this).tooltip('hide');
    });
    $('[data-bs-toggle="tooltip"]').on('click', function () {
        $(this).tooltip('hide')
    });
    $('.popover-dismiss').popover({
        trigger: 'hover'
    })

    $('#lst_art_adm').on('all.bs.table', function (e, name, args) {
        $('[data-toggle="tooltip"]').tooltip();
        $('[data-toggle="popover"]').popover();
    });

    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

    const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
    const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
}

这些能解释为什么这些工具提示留在屏幕上吗?并不总是这样。似乎是随机的。

pb3s4cty

pb3s4cty1#

无论何时使用 AJAX 加载新内容,最好隐藏所有工具提示和弹出窗口。我使用这个函数:

function hidePopper()
{
  $("[data-bs-toggle=\'tooltip\']").tooltip("hide");
  $("[data-bs-toggle=\'popover\']").popover("hide");
}

在处理 AJAX 调用之前使用此函数。这样,他们总是会在需要的时候消失。
工具提示没有消失的原因可能是您用新的HTML代码替换了它们所基于的HTML代码。
正如你所知道的,你还需要激活工具提示和弹出窗口。我使用这个函数:

function activatePopper()
{
  let tooltipTriggerList = [].slice.call(document.querySelectorAll(\'[data-bs-toggle="tooltip"]\'));
  let tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl);
  });
  let popoverTriggerList = [].slice.call(document.querySelectorAll(\'[data-bs-toggle="popover"]\'));
  let popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl);
  });
}

我总是在 AJAX 调用完成后使用此函数。新代码中的任何工具提示或弹出框都将在调用此函数后起作用。
换句话说,我不处理单独的工具提示或弹出窗口,我把它们作为一个组来处理。

相关问题