有人可以给我一个如何使用 BootStrap5.x 制作工具提示的示例吗？它使用了 Popper JS，其中工具提示只是与关联元素保持在一起？不管页面是否溢出/出现滚动条？
我尝试过边界和各种事情。但我显然没有做对任何事情。
问题在于工具提示不断地远离其关联元素，例如跨度、按钮或标签。当屏幕上出现滚动条时，就会发生浮动。工具提示会断开连接并以与滚动条大小大致相同的距离远离关联元素。
我在 StackOverflow 和其他网站上看到了很多类似的问题，但我确实没有做正确的事情来通过 JavaScript 进入工具提示的配置并进行任何有影响的更改。
CSS
.custom-small-tooltip {
font-size: x-small;
max-width: 150px;
}
HTML
<div>
<div>
<label data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="custom-small-tooltip" data-bs-trigger="hover" data-bs-title="Sample Title">SampleLabel Display Value</label>
</div>
</div>
外部 JS Bootstrap ToolTip 初始化器
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
尝试解决此问题的示例..
var myButtonTarget = document.getElementById('mybuttonname')
var tooltip = new bootstrap.Tooltip(myButtonTarget, {
boundary: document.body
//placement: 'left' //setting this does nothing to the tooltip's behavior.
});
我已将其放置在同一个 js 文件中的引导工具提示初始化程序代码之后，当我在其中设置任何内容时，我似乎无法使用按钮的工具提示进行任何更改。
所以我在这个问题上几乎抛弃了 Bootstrap 和 Popper JS...
然而...X-D
经过大约一周的努力，让语法和其他所有内容都正确，只是为了能够调整 popper 行为，我找到的解决方案如下。
在该网站的主要 Javascript 外部库中，我按照其文档的建议初始化了 Bootstrap 工具提示。
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
然后使用与工具提示功能相关的元素标记我的元素。
示例：
<span class="mywrapper-or-whatever-class">
<button class="my-class" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-custom-class="custom-tooltip" data-bs-trigger="hover" data-bs-title="Text to display when Tooltip activates">
Button Text
</button>
</span>
跨度的 CSS 包含一个关键点，因为类定义中没有提供“位置”。
CSS
.mywrapper-or-whatever-class {
border-top: solid;
border-top-width: 1px;
display: block;
font-size: small;
}
这一切都包含在一个具有几层 div 的表单中。
<body>
<form>
<div>
<span>
<button>for example</button>
</span>
</div>
</form>
</body>
容器元素实际上并不重要，除了最终的页面之外，当尺寸足够小时，浏览器窗口的右侧和左侧都可以使用滚动条。即，当正文和页面的最小宽度导致滚动条出现并且页面内容导致页面高度延伸到屏幕外时，就会出现溢出行为。
要点： 页面上显示滚动条。 请遵循 Bootstrap 设置工具提示的记录实践。 mywrapper-or-whatever-class CSS 类没有位置属性。
解决方案是将工具提示的容器设置为wrappers元素，同时将popperConfig策略设置为“absolute”。同时还设置包装器具有“相对”位置。然而，相对定位只会影响在其关联元素的左侧或右侧弹出的工具提示。
用于初始化所有工具提示的站点 Javascript 库。
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl, {
container: tooltipTriggerEl.parentElement,
popperConfig: {
strategy: 'absolute',
},
}))
CSS 将 Position 属性更新为相对状态（用于左侧和右侧显示工具提示）。
CSS
.mywrapper-or-whatever-class {
position: relative;
border-top: solid;
border-top-width: 1px;
display: block;
font-size: small;
}
最终的行为是，即使元素滚动到屏幕之外，您现在也将拥有保持附加到其元素的工具提示。