le changement de position de jquery tooltip flèche

Je suis en train de changer la position de la flèche à gauche près de la zone de texte.
comment puis-je résoudre ce problème ??

J'ai essayé ceci:

De travail Exemple de lien :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;
}
Où êtes-vous essayer de le déplacer vers
Dans la classe de flèche:après, mais n'obtient pas comment ratate.
Vous exagérez. Lire cet article sitepoint.com/pure-css3-speech-bubbles
Donner un essai à ceci: jsfiddle.net/IrvinDominin/6GfjC
pourquoi n'avez-vous pas poster comme une réponse au lieu d'un commentaire?!

OriginalL'auteur Kango | 2013-09-25

  1. 4

    Vous pouvez utiliser jQuery UI position que vous avez essayé et CSS3 after pseudo-élément pour définir un meilleur delta.

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

    Démo: http://jsfiddle.net/IrvinDominin/6GfjC/

    OriginalL'auteur Irvin Dominin

  2. 1

    Comment sur cette?

    Vous avez vraiment exagéré. Le principe de base est facile à apprendre. Vous avez un blanc de couleur div avec classe .arrow, et la deuxième div rotation de 45 degrés, ce qui est à moitié caché derrière le premier. En fonction de quelle partie est masquée, vous obtenez la flèche.
    Dans ce cas, vous devez masquer la moitié droite de la deuxième div pour obtenir la flèche de gauche.

    OriginalL'auteur Johnny_D