jQuery.fn.shToolTip=function(){
  if($('.toolTip').length == 0){
    $('body').append('<div class="toolTip"><div class="toolTipTop"></div><div class="toolTipBody"></div><div class="toolTipBottom"></div><div class="toolTipArrow"></div></div>');
  }
  return this.each(function(){
    
    $(this).mouseover(function(event){
      $(this).addClass('hovered');
      var browserWidth = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
      // alert(browserWidth);
      $('.toolTipBody').html($(this).find('.toolTipContent').html());
      $('.toolTip').width('auto')
        if($('.toolTip').width()>225){$('.toolTip').width(225);}
                      var hoveredElementWidth=$(this).width()+21;
    var hoveredElementHeight=$(this).height()/2;
    var toolTipWidth=$('.toolTip').outerWidth();
    var toolTipHeight=$('.toolTip').outerHeight()/2;
    
    
    var toolTipRight =$(this).offset().left+hoveredElementWidth+toolTipWidth+20;
    if(toolTipRight>=browserWidth){
      $('.toolTipArrow').removeClass('toolTipArrowLeft').removeClass('toolTipArrowRight').addClass('toolTipArrowRight')
      $('.toolTip').css('left',$(this).offset().left-toolTipWidth-21+'px')
        .css('top',$(this).offset().top-toolTipHeight+hoveredElementHeight+'px')
        .fadeIn(300);
    } else {
      $('.toolTipArrow').removeClass('toolTipArrowRight').removeClass('toolTipArrowLeft').addClass('toolTipArrowLeft')
      $('.toolTip').css('left',$(this).offset().left+hoveredElementWidth+'px')
        .css('top',$(this).offset().top-toolTipHeight+hoveredElementHeight+'px')
        .fadeIn(300);
    }
    
    // alert($(this).offset().left+hoveredElementWidth+toolTipWidth);
    
    
    
    }).mouseout(function(){
      $(this).removeClass('hovered');
      $('.toolTip').hide();       
    });
    
    
  });
};