thay đổi vị trí của jquery tooltip arrow

Question

Tôi đang cố thay đổi vị trí của mũi tên sang trái gần hộp văn bản.
làm cách nào tôi có thể sửa lỗi này?

Tôi đã thử này:

làm việc Ví dụ link: 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; 
} 

Answer 1

Làm thế nào về this?

Bạn đã thực sự quá mức. Nguyên tắc cơ bản là dễ học. Bạn có một màu trắng div với lớp .arrow và số thứ hai div được xoay trên 45 độ, tức là nửa băm bí ẩn đầu tiên. Tùy thuộc vào phần nào bị ẩn, bạn sẽ nhận được mũi tên. Trong trường hợp này, bạn phải ẩn nửa bên phải của số div thứ hai đó để lấy mũi tên trái.

Answer 2

Bạn có thể sử dụng jQuery UI position khi bạn đã thử và CSS3 after phần tử giả để đặt đồng bằng trên cùng.

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/::after

Code:

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