自定义样式箭头Tooltipster

Question

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

我通过覆盖.tooltipster-arrow-left / right span来设置箭头的样式：

 .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-base中添加一个边距，但是效果不好。它仅适用于左侧定位工具提示或右侧定位工具提示，而不适用于两者。

感谢您的帮助。

Answer 1

在项目的v4分支上使用Tooltipster v4（实验性），您将能够更改箭头的大小。一些打包的主题会改变默认样式的箭头大小，看看它是如何在那里完成的。

Answer 2

我使用此css样式为我的主题工具提示器增加顶部和底部对齐的箭头大小

.tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span {
    border-left: 12px solid transparent !important;
    border-right: 12px solid transparent !important;
    border-top: 12px solid;
    bottom: -12px;
}

.tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span {
    border-bottom: 12px solid;
    border-left: 12px solid transparent !important;
    border-right: 12px solid transparent !important;
    top: -12px;
}