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

Question

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

我通过覆盖 .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（实验性），您将能够更改箭头的大小。一些打包的主题改变了默认样式的箭头大小，看看那里是怎么做的。

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;
}

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

Custom styled arrows Tooltipster

css

tooltipster