0

I'm using tooltipster with custom styling. But I need the arrow to be bigger (30px in stead of default 7/8px). But when I create the custom css the arrows look great, but the position of the tooltip is wrong and overlaps the hotspot. (still based on the original 'small' arrow).

snippet

I styled the arrows by overriding the .tooltipster-arrow-left/right span with:

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

Is there a way to tell tooltipster what the size of the arrow will be?
Or can I set an offset?

I tried adding a margin to the .tooltipster-base, but this doesn't work well. It only works for either left positioned tooltip or right positioned tooltip and not for both.

Thanks for your help.

4

2 回答 2

0

我为我的主题工具提示器使用了这种 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;
}
于 2016-02-02T09:01:47.940 回答
0

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

于 2015-12-01T09:47:19.890 回答