自定义样式的箭头 Tooltipster答案

【问题标题】：Custom styled arrows Tooltipster自定义样式的箭头 Tooltipster
【发布时间】：2015-12-01 09:10:59
【问题描述】：

我正在使用带有自定义样式的工具提示器。但我需要箭头更大（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-base 中添加边距，但效果不佳。它仅适用于左侧工具提示或右侧工具提示，而不适用于两者。

感谢您的帮助。

【问题讨论】：

标签： css tooltipster

【解决方案1】：

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

【讨论】：

【解决方案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;
}

【讨论】：