cambia posizione di jQuery tooltip arrow

Question

Sto provando a cambiare la posizione della freccia a sinistra vicino alla casella di testo.
come posso risolvere questo ??

Ho provato questo:

Esempio di lavoro 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

Che ne dici di this?

Hai davvero esagerato. Il principio di base è facile da imparare. Hai un colore bianco div con classe .arrow e il secondo div ruotato su 45 gradi, che è mezzo nascosto prima del primo. A seconda di quale parte è nascosta, ottieni la freccia. In questo caso devi nascondere la metà di quel secondo div per ottenere la freccia sinistra.

Answer 2

È possibile utilizzare l'interfaccia utente jQuery position come si è tentato e lo pseudoelemento CSS3 after per impostare un delta superiore.

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

Codice:

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