我正在使用Bootstrap 5,并尝试创建自定义工具提示。我在这里看到了Bootstrap 5文档中使用的标记。
我收集(并在网上查看)这些工具提示不在调用元素中,而是兄弟姐妹。我正在尝试将自定义类与下面的标记一起使用。
// CSS test option #1
.custom-tooltip + .tooltip > .tooltip-inner
{
text-align: left;
max-width: 500px;
}
// CSS test option #2
.custom-tooltip ~ .tooltip > .tooltip-inner
{
text-align: left;
max-width: 500px;
}
<span class="custom-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" title="The tooltip text<br/>Extra textC">
<svg ... ></svg>
</span>
因此,如果仅使用.tooltip-inner
,显然效果很好,但是我不希望使用全局工具提示,而需要使用其他自定义工具提示。
(这花了一些时间来弄清楚,因为规范的答案不起作用---这很可能是JSFiddle的事情,或者是BS5错误..不确定。)
记录的方法是将自定义类添加到customClass
选项中,如下所示:
<span data-bs-customClass="custom-tooltip" data-bs-toggle="tooltip" data-bs-html="true" title="The tooltip text<br/>Extra text">
STUFF
</span>
但是我无法在JSFiddle上使用它。这是因为html以全小写形式呈现(在Chrome上),而“ customClass”中的“ C”呈现“ customclass” ..因此BS5 JS从不使用它。解决方法是在工具提示初始化程序中传递该选项,如下所示:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl, {
'customClass': 'custom-tooltip'
})
})
然后,您的CSS应该可以正常使用:
.custom-tooltip.tooltip > .tooltip-inner
{
text-align: left;
max-width: 500px;
}
编辑:
原来这是固定的。正确的方法是在大写选项之前添加连字符“-”并使用小写形式,如下所示:
<span data-bs-custom-class="custom-tooltip" data-bs-toggle="tooltip" data-bs-html="true" title="The tooltip text<br/>Extra text">
STUFF
</span>
然后,初始化程序还应该排除该选项(添加该选项将覆盖data属性)。初始化程序是一个根据文档:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句