使用 Bootstrap 5 创建自定义工具提示
Using Bootstrap 5 to create custom tooltips
我正在使用 Bootstrap 5 并尝试创建自定义工具提示。我在这里看到 Bootstrap 5 文档中使用的标记。
我收集到(并在线查看)工具提示不在调用元素中并且是同级元素。我正在尝试使用自定义 class 像下面的标记一样。
// 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 的错误……不确定。)
记录的方法是将自定义 class 添加到 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 呈现为 (on 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>
然后初始化程序也应该排除该选项(添加它会覆盖数据属性)。初始化程序是根据文档:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
我正在使用 Bootstrap 5 并尝试创建自定义工具提示。我在这里看到 Bootstrap 5 文档中使用的标记。
我收集到(并在线查看)工具提示不在调用元素中并且是同级元素。我正在尝试使用自定义 class 像下面的标记一样。
// 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 的错误……不确定。)
记录的方法是将自定义 class 添加到 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 呈现为 (on 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>
然后初始化程序也应该排除该选项(添加它会覆盖数据属性)。初始化程序是根据文档:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})