css - 自定义样式的箭头工具提示

Question

我正在使用带有自定义样式的工具提示。但我需要箭头更大(30px 而不是默认的 7/8px)。但是当我创建自定义 css 时，箭头看起来很棒，但是工具提示的位置是错误的并且与热点重叠。 (仍然基于原来的“小”箭头)。

我通过覆盖 .tooltipster-arrow-left/right 跨度来设置箭头样式:

 .tooltipster-arrow-left span {
    border-top: 30px solid transparent !important;
    border-bottom: 30px solid transparent !important;
    border-left: 30px solid;
    top: 50%;
    margin-top: -30px;
    right: -30px;
}

.tooltipster-arrow-right span {
    border-top: 30px solid transparent !important;
    border-bottom: 30px solid transparent !important;
    border-right: 30px solid;
    top: 50%;
    margin-top: -30px;
    left: -30px;
}

有没有办法告诉 tooltipster 箭头的大小？
或者我可以设置一个偏移量吗？

我尝试为 .tooltipster-base 添加边距，但这效果不佳。它仅适用于左侧定位的工具提示或右侧定位的工具提示，而不适用于两者。

感谢您的帮助。

Answer 1

在元素的 v4 分支上使用 Tooltipster v4(实验性)，您将能够更改箭头的大小。一些打包的主题更改了默认样式的箭头大小，看看它是如何完成的。