我正在使用Bootstrap 5并尝试创建自定义工具提示。我在这里看到了Bootstrap 5文档中使用的标记。
引导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
,显然,它工作得很好,但我不想要一个全局工具提示,需要有不同的自定义工具提示。
2条答案
按热度按时间luaexgnf1#
文档中的方法是将您的自定义类添加到
customClass
选项中,如下所示:但我不能让它在这个JSFiddle上工作。这是因为html呈现 (在Chrome上) 为小写,而“customClass”中的“C”呈现为“customclass”。所以BS 5 JS不会接收到解决方法是在工具提示初始化器中传递该选项,如下所示:
然后你的CSS应该正常工作:
编辑:
原来这是固定的...正确的方法是在大写选项前加上连字符“-”,并使用小写形式,如下所示:
初始化器还应该排除该选项(添加它会覆盖data属性)。初始化器是一个根据文档:
fkvaft9z2#
我想用单击显示工具提示,因此代码如下所示:
也要感谢:引导工具提示单击触发器不工作