Question

我正在尝试将箭头的位置更改为文本框附近的左侧我该怎么办？

我试过这个：

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

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

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

Answer 2

this怎么样？

你真的过分了。基本原理很容易学习。您有一个白色的div，其中.arrow级，第二个div旋转了45度，这是一半隐藏的第一个。根据隐藏的部分，您可以获得箭头。在这种情况下，您必须隐藏第二个div的右半部分以获得左箭头。

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

2 个答案: