更改jquery工具提示箭头的位置

我正在尝试更改文本框附近向左箭头的位置。
我怎样才能解决这个问题

我试过这个：

工作示例链接：

HTML:

怎么样

你做得太过分了。基本原理很容易学。您有一个白色的

div

，带有class

箭头，第二个
div
旋转45度，在第一个之后半隐藏。根据隐藏的部分，可以得到箭头。
在这种情况下，您必须隐藏该秒的右半部分
div
，以获得左箭头。
您可以在尝试时使用jQuery UI
position
，并在

伪元素之后使用CSS3

来设置顶部增量

参考：

代码：

演示：
你想在课堂上将它移到哪里？箭头：之后，但不知道如何调整它。你做得太过分了。读这篇文章试试看：@Irvindiminakaedward:你为什么不把它作为一个答案而不是一个评论发布呢？！
<input id="test" title="We ask for your age only for statistical purposes.We ask for your age only for statistical purposes.We ask for your age only for statistical purposes.We ask for your age only for statistical purposes.We ask for your age only for statistical purposes." />

$('input').tooltip({
    position: {
    my: "left center",
    at: "right+10 center",
    using: function( position, feedback ) {
        $( this ).css( position );
        $( "<div>" )
        .addClass( "arrow" )
        .addClass( feedback.vertical )
        .addClass( feedback.horizontal )
        .appendTo( this );
        }
     }
});

.ui-tooltip, .arrow:after {
    background: #fff;
    border: 1px solid #C90;
}
.ui-tooltip {
padding: 10px 20px;
border-radius: 20px;
font: bold 14px "Helvetica Neue", Sans-Serif;
text-transform: uppercase;
box-shadow: 0 0 7px black;
}
.arrow {
width: 70px;
height: 16px;
overflow: hidden;
position: absolute;
top: 50%;
margin-left: -35px;
bottom: -16px;
}
.arrow.top {
top: -16px;
bottom: auto;
}
.arrow.left {
/*left: 20%;*/
}
.arrow:after {
content: "";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
box-shadow: 6px 5px 9px -9px black;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
tranform: rotate(45deg);
}
.arrow.top:after {
bottom: -20px;
top: auto;
}

.right .ui-tooltip-content::after {
    top: 47%;
    left: -10px;
    border-color: transparent #666;
    border-width: 10px 10px 10px 0;
}

.left .ui-tooltip-content::after {
    top: 47%;
    right: -10px;
    border-color: transparent #666;
    border-width: 10px 0 10px 10px;
}