css - カスタム スタイルの矢印

Question

カスタムスタイリングでツールチップスターを使用しています。しかし、矢印を大きくする必要があります (デフォルトの 7/8 ピクセルではなく 30 ピクセル)。しかし、カスタム 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 にマージンを追加してみましたが、うまくいきません。左に配置されたツールチップまたは右に配置されたツールチップのいずれかでのみ機能し、両方では機能しません。

ご協力いただきありがとうございます。