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 に答える