javascript - css/js/jquery を使用したツールチップの末尾の配置

Question

私の問題は、ツールチップの末尾を適切に配置できないことです。上、下、左、右の 4 つの異なる場所に配置できるヒントを生成するプラグインがあります。各ヒントの中央上/左/下/右に尾を配置する必要があります。

私はそのようなcssを使用してみました：

.ui-hint{
    display: block;
    position: absolute;
    min-width: 50px;
    max-width: 200px;
    min-height: 25px;
    background: #FDD10B;
    padding: 15px;
    color: #000000;
    font-size: 16px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.ui-hint-left:before{
    position: absolute;
    z-index: 9998;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-left: 20px solid #FDD10B;
    border-bottom: 15px solid transparent;
    right: -15px;
    top: 25%;
}

.ui-hint-right:before{
    position: absolute;
    z-index: 9998;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-right: 20px solid #FDD10B;
    border-bottom: 15px solid transparent;
    left: -15px;
    top: 25%;
 }

.ui-hint-top:before{
    z-index: 9998;
    position: absolute;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 20px solid #FDD10B;
    left: 42%;
    bottom: -15px;
}

.ui-hint-bottom:before{
    z-index: 9998;
    position: absolute;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 20px solid #FDD10B;
    left: 42%;
    top: -15px;
}

標準の高さ/幅のヒントでは問題なく動作しますが、それらが大きくなると、パーセンテージが台無しになるため、ツールチップがシフトします。たぶん、js/jquery（要素を追加）を使用してそれを作成できますか？ご意見をお待ちしております。