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

【问题标题】：change position of jquery tooltip arrow更改 jquery 工具提示箭头的位置
【发布时间】：2013-09-30 22:37:31
【问题描述】：

我正在尝试将箭头的位置更改为靠近文本框的左侧。
我该如何解决这个问题？？

我试过这个：

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

【问题讨论】：

你想把它移到哪里
课堂上的箭头：之后但不知道如何评价。
你做得过火了。阅读这篇文章sitepoint.com/pure-css3-speech-bubbles
试试这个：jsfiddle.net/IrvinDominin/6GfjC
@IrvinDomininakaEdward：你为什么不把它作为答案而不是评论发布？！

标签： jquery css jquery-ui

【解决方案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;
}

演示：http://jsfiddle.net/IrvinDominin/6GfjC/

【讨论】：

【解决方案2】：

this怎么样？

你真的做得太过分了。基本原理很容易学习。你有一个白色的div 类.arrow，第二个div 旋转了45 度，这对第一个来说是半隐藏的。根据隐藏的部分，您会得到箭头。在这种情况下，您必须隐藏第二个 div 的右半部分才能获得左箭头。

【讨论】：