change position of jquery tooltip arrow

Question

I am trying to change the position of arrow to left near text box.
how can i fix this ??

I have tried this:

Working Example 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

You can use jQuery UI position as you tried and CSS3 after pseudo element to set a top 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;
}

Demo: http://jsfiddle.net/IrvinDominin/6GfjC/

Answer 2

How about this?

You've really overdid it. The basic principle is easy to learn. You have a white colored div with class .arrow, and second div rotated on 45 degrees, which is half hidden behing first one. Depending on what part is hidden you get the arrow. In this case you have to hide right half of that second div to get left arrow.