$().ready(function() {

  var showTooltip = function(event) {
      $('#tltip').remove();
      elt = $(this).attr('rel');
      html = $('#'+elt).html();

      classes = $(this).attr('class');
      classesTab = classes.split(' ');
      classe = classesTab[1];

      //$('<div id="tltip">'+html+'</div>').appendTo('body');
      //A remplacer par la ligne suivante aprés validation T.H
      $('<div id="tltip" class="'+classe+'">'+html+'</div>').appendTo('body');

     changeTooltipPosition(event);
  };

  var hideTooltip = function() {
  	$('#tltip').remove();
  };

  var changeTooltipPosition = function(event) {
  	var tooltipX = event.pageX + 15;
  	var tooltipY = event.pageY + 20;
    var h = $('#tltip').height();
    if (h > 100) tooltipY = tooltipY - (h/1.4);
  	$('#tltip').css({top: tooltipY, left: tooltipX});
  };
  
  var clickTooltip = function() {
  	return false;
  };

  $('.tooltip').bind({
  	mousemove : changeTooltipPosition,
  	mouseenter : showTooltip,
  	mouseleave: hideTooltip,
    click : clickTooltip
  });

});