Tooltip arrow isn't displaying properly when moved to left side of tooltip (jQuery UI 1.9)

Tooltip arrow isn't displaying properly when moved to left side of tooltip (jQuery UI 1.9)

I'm using a speech bubble style tooltip based on the jquery ui tooltip widget 'Custom Styling' demo, but I'm having trouble properly displaying the arrow when I need it on the left side of the tooltip instead of on the top or bottom.


Can someone help me fix this code (it cuts off the tip and displays too large a section of the arrow)?


  1. <style type="text/css">  
  2.    
  3.    .ui-tooltip.menu_info {
  4.         max-width: 200px;
  5.     }       
  6. * html .ui-tooltip {
  7.     background-image: none;
  8. }
  9. body .ui-tooltip { border-width: 1px; }
  10.     .ui-tooltip, .arrow:after, .arrow_left_side:after {
  11.         background: white;
  12.         border: 1px solid #999;        
  13.         
  14.     }        
  15.     .ui-tooltip {
  16.         padding: 10px 12px;
  17.         color: Black;
  18.         font: 8pt "Helvetica Neue", Sans-Serif;    
  19.         max-width: 150px;
  20.         border: 1px solid #999;
  21.     position: absolute;
  22.     }            
  23.     .arrow_left_side {        
  24.         height: 70px;
  25.         width: 8px;     
  26.         overflow: hidden;
  27.         position: absolute;
  28.         top: 0px;
  29.         margin-top: 5px;
  30.         left: -8px;
  31.     }    
  32.     .arrow_left_side:after {
  33.         content: "";
  34.         position: absolute;
  35.         width: 25px;    height: 25px;
  36.         -webkit-transform: rotate(45deg);
  37.         -moz-transform: rotate(45deg);
  38.         -ms-transform: rotate(45deg);
  39.         -o-transform: rotate(45deg);
  40.         tranform: rotate(45deg);
  41.     }
  42.      </style>    
  43.  <script>
  44. $(function() {
  45.     $('.menu_info').tooltip({
  46.         position: {
  47.             my: "left+20 center",
  48.             at: "right center",
  49.             using: function (position, feedback) {
  50.                 $(this).css(position);
  51.                 $("<div>")
  52.                         .addClass("arrow_left_side")
  53.                         .addClass(feedback.vertical)
  54.                         .addClass(feedback.horizontal)
  55.                         .appendTo(this);
  56.             }
  57.         }
  58.     });
  59. });
  60. </script>