zmiana pozycji jquery tooltip strzałka

Question

Próbuję zmienić pozycję strzałki w lewo w pobliżu pola tekstowego.
jak mogę to naprawić?

Próbowałem to:

Przykład działający 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

Co powiecie na ?

Naprawdę przesadziłeś. Podstawowa zasada jest łatwa do nauczenia. Masz biały kolor div z klasą .arrow, a drugi div obrócony o 45 stopni, który jest w połowie ukryty jako pierwszy. W zależności od tego, która część jest ukryta, dostajesz strzałkę. W tym przypadku musisz ukryć prawą połowę tej sekundy div, aby uzyskać strzałkę w lewo.

Answer 2

Możesz użyć jQuery UI position jak próbowałem i CSS3 after pseudo element, aby ustawić górną deltę.

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

Kod:

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