6

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

我试过这个：

工作示例链接：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;
}
4

2 回答 2

5

您可以尝试使用 jQuery UIposition和 CSS3after伪元素来设置顶部增量。

参考：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/

于 2013-09-25T14:21:52.460 回答
1

这个怎么样？

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

于 2013-09-25T11:51:01.487 回答