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

Question

我将尝试将箭头位置移到文本框左边。如何解决这个问题？我已经尝试了以下方法：

工作示例链接：http://jsfiddle.net/b8fcg/

HTML:

<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." />

Javascript:

$('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 );
        }
     }
});

CSS：

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

- Kango

---

你想把它移动到哪里？ - Itay

在类别arrow:after中，但不知道如何旋转它。 - Kango

你做得过头了。阅读这篇文章http://www.sitepoint.com/pure-css3-speech-bubbles/。 - Itay

尝试一下这个：http://jsfiddle.net/IrvinDominin/6GfjC/ - Irvin Dominin

@IrvinDomininakaEdward：为什么你没有将它作为回答发布，而是作为评论发出来？！ - Mohammed Swillam

@MohammedElSayed 我来做 :-) - Irvin Dominin

Answer 1

您可以使用jQuery UI的position和CSS3的after伪元素来设置顶部偏移量。

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/::after 代码：

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

Demo: http://jsfiddle.net/IrvinDominin/6GfjC/

- Irvin Dominin

Answer 2

你觉得 this 怎么样？

你真的过度了。基本原理很容易学习。你有一个白色的 div，类名为.arrow，第二个 div 旋转了45度，被第一个 div 遮盖了一半。根据遮盖的部分不同，你会得到不同的箭头。 在这种情况下，你需要隐藏第二个 div 的右半部分，以获得左箭头。

- Johnny_D