在 Bootstrap 4 中,我能夠執行以下操作以在檔案就緒時創建多個工具提示:
$('div.sidebar-menu i[data-toggle="tooltip"]')
.tooltip({ boundary: "viewport", delay: { "show": 500, "hide": 100 }, placement: "right" })
.on("show.bs.tooltip", function (this: HTMLElement) {
const css = toggler.data("toggle");
return $(toggler.data("target")).hasClass(css);
});
但是隨著 jQuery 的“洗掉”,我正在嘗試以新的方式來做,似乎您無法將選擇器傳遞給允許多個元素的新 Bootstrap 建構式。
這不起作用。(它只創建一個實體。)
var tips = new bootstrap.Tooltip('div.sidebar-menu i[data-bs-toggle="tooltip"]', { delay: { "show": 500, "hide": 100 }, placement: "right" });
我們現在真的必須做一個 for 回圈來實體化多個實體嗎?Bootstrap 站點上的所有示例一次僅用于一個實體。
uj5u.com熱心網友回復:
您需要使用 JS 選擇器而不是 JQUERY 選擇器。看看原始的引導程式示例:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/320804.html
標籤:推特引导 bootstrap-5
