Displaying Tooltip on right end of control with arrow background color

Question

How do I display tool tip to right end of control with arrow facing to right end of control and change background color of arrow to red?

This is what I tried

<input id="age" title="test tooltip">
 $( document ).tooltip({
      position: {
        my: "right bottom-20",
        at: "center top",
        using: function( position, feedback ) {
          $( this ).css( position );
          $( "<div>" )
            .addClass( "arrow" )
            .addClass( feedback.vertical )
            .addClass( feedback.horizontal )
            .appendTo( this );
        }
      }
    });
 .ui-tooltip, .arrow:after {
    background: black;
     }
  .ui-tooltip {
    padding: 10px 20px;
    color: white;    
    font: bold 14px "Helvetica Neue", Sans-Serif;

  }
  .arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 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;

    -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

Edit

So, you want this :

First, get rid of your .arrow class, and add this in your CSS :

.ui-tooltip-content::after {
    top: calc(50% - 10px); /* Calculates the half height minus 10px */
    left: -10px;
    border-color: transparent red;
    border-width: 10px 10px 10px 0;
    content: '';
    position: absolute;
    border-style: solid;
    display: block;
    width: 0;
}

Then, to position your tooltip to the right, use this in your JS:

position: {          
   my: 'right center', 
   at: 'left-10 center'
   ...
}

Here's a demo to play with .

About calc() : Method of allowing calculated values for length units, ie width: calc(100% - 3em)

It's supported in major desktop browser.

---

Old answer (will be deleted after acceptance)

I think this is what you're trying to achieve:

Change your Javascript position for:

position: {
    my: "left bottom-20",
    at: "center top",
    ...

And for the red arrow, add this in your CSS:

.arrow:after{
    background:red;
}

Answer 2

.arrow:after {
  content: "";
  height: 45px;
  left: 62px;
  position: absolute;
  transform: rotate(45deg);
  width: 81px;
}
.arrow.top {
  bottom: -1px;
}
.arrow.left {
  left: -21%;
}

Answer 3

This is a little tricky since Jquery UI does a lot in the background to try positioning the tooltip.

Check out my fiddle: http://jsfiddle.net/pa5N8/1/

I've modified .arrow.left class to display a left-facing arrow using css borders, and positioned it appropriately to the center of the input field wall.

This is ideal if your input fields have consistent width and heights. Otherwise, I'd recommend using a different library like tipsy: http://onehackoranother.com/projects/jquery/tipsy/

Good luck!