我有引导工具提示,当用户悬停在他们出现。有时这些工具提示不会消失。在应用程序运行期间,它们将像这样停留在屏幕上。当我切换到应用程序的新屏幕时,它们将保留。我想这可能与创建工具提示的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))
}
这些能解释为什么这些工具提示留在屏幕上吗?并不总是这样。似乎是随机的。
1条答案
按热度按时间pb3s4cty1#
无论何时使用 AJAX 加载新内容,最好隐藏所有工具提示和弹出窗口。我使用这个函数:
在处理 AJAX 调用之前使用此函数。这样,他们总是会在需要的时候消失。
工具提示没有消失的原因可能是您用新的HTML代码替换了它们所基于的HTML代码。
正如你所知道的,你还需要激活工具提示和弹出窗口。我使用这个函数:
我总是在 AJAX 调用完成后使用此函数。新代码中的任何工具提示或弹出框都将在调用此函数后起作用。
换句话说,我不处理单独的工具提示或弹出窗口,我把它们作为一个组来处理。