如何解决Bootstrap 5:使工具提示可悬停且链接可点击
有时您希望在工具提示中包含链接并使其可点击。由于我没有找到任何关于 bootstap 5 的好答案,我花了一些时间才弄清楚我想分享它。
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
new bootstrap.Tooltip(tooltipTriggerEl);
当您将鼠标悬停在工具提示上(并取消悬停原始元素)时,如何保持工具提示可见?
解决方法
如果要启用工具提示悬停,修改如下:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
new bootstrap.Tooltip(tooltipTriggerEl,{ trigger: 'manual' });
$(tooltipTriggerEl).on("mouseenter",function () {
var _this = this;
$(this).tooltip("show");
$(".bs-tooltip-start").on("mouseleave",function () {
$(_this).tooltip('hide');
});
}).on("mouseleave",function () {
var _this = this;
setTimeout(function () {
if (!$(".bs-tooltip-start:hover").length) {
$(_this).tooltip("hide");
}
},300);
});
});
如果您想在工具提示中包含任何 HTML,请不要忘记向元素添加 data-bs-html=true
;)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。