How to fixed position of arrow not depending on content in Jquery Tooltip?

Question

While applying tooltip on textbox , it coming fine the only problem is that i have an issue in handing the position of arrow according to content in title attribute. For short title arrow is coming fine(middle of textbox) but for long title the arrow is going up to the textbox. Here is the JSFiddle code link:

Fiddle Link

 $(function() {
$( document ).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 );
    }
  }
});

});

Answer 1

You don't need to add the extra class arrow to the tooltip. You can use the :before pseudo class on the class .ui-tooltip .

.ui-tooltip {
    padding: 10px 12px;
    color: Black;
    font: 8pt "Helvetica Neue", Sans-Serif;   
    max-width: 150px;
    background: white;
    border: 1px solid #999;
    position: absolute;
} 
.ui-tooltip:before {
    content: "";
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 
    border-right:10px solid #999; 
    position: absolute;
    top: 50%;
    margin-top: -10px;
    margin-left: -22px;
}

Also check this the updated Fiddle .

Answer 2

You can set

top:50%

Or use this

Only this code.. this is what you exactly want..:)

.arrow {
        height: 0;
        width: 0;    
        overflow: hidden;
        position: absolute;
        top: 50%;
        margin-top: -10px;
        left: -20px;
        border:10px solid #999;
        border-top-color:transparent;
        border-left-color:transparent;
        border-bottom-color:transparent;

  }

Demo Link