$.fn.showTooltip = function(noAnim){
  var index = $(this).index();
  var tooltipHTML = $("<span class='tooltip'><h3>"+index+": "+projetosReais[index].cliente+"</h3><p>"+projetosReais[index].descricao+"</p><img class='tip' src='images/tip.png' /><img class='shadow' src='images/shadow.png' /></span>");
  var element = $(this);
  var vertMove = 80;
  var delay = 500;
  if((this).find(".tooltip").size() <= 0){
    var newTooltip = $(tooltipHTML).clone().css('opacity', 0).appendTo(this).alignTooltip(this);

    if(typeof(noAnim)=="undefined" || noAnim == false){
      newTooltip.css({
        bottom: "+="+vertMove,
        opacity: 1,
        zIndex: parseInt(element.css('z-index'))+2
      })
      newTooltip.delay(delay).animate({
        bottom: "-="+vertMove,
        opacity: 1
      }, {
        duration: 600,
        easing: "easeOutBounce"
      });
    } else {
      newTooltip.css("opacity", 1);
    }
    shadowWidth = newTooltip.find('.shadow').width();

    newTooltip.find('.shadow').css({
      opacity: 1,
      width: 1
    })

    .delay(delay).animate(
      {
        bottom: "+="+vertMove,
        width: shadowWidth
      },
      {
        duration: 600,
        easing: "easeOutBounce"
      });
  }
}
$.fn.alignTooltip = function(baseElement){
  var tooltip = this;
  var tip = this.find('.tip');
  var shadow = this.find('.shadow');
  var offset = 0;
  var offsetTip = offset/tooltip.width()*50;

  tooltip.centerAlign(baseElement, offset).css("bottom", 200);
  tip.centerAlign(tooltip, offset).css("bottom", -tip.height());
  shadow.centerAlign(tooltip, offset).css("bottom", -110);

  return tooltip;
}

$.fn.hideTooltip = function(){
  var index = $(this).index();
   tooltip = $(this).find(".tooltip");

   tooltip.animate({opacity: 0}, { complete: function(){
      $(this).remove();
    }
  });
}