$(document).ready(function () {
 /* info icon */
 var boxHtml = "\
  <div id='infobox'>\
   <div class='title'>Kontakt</div>\
   <div class='bg'>\
    <p class='text'>At carus indissolubilis servitium ora lac Vehemens, ita Silex dis Concateno quo sis cur.</p>\
   </div>\
   <div class='bottom'></div>\
  </div>\
 ";
 
 $(".info").hover(
  function(e){
   var infoText = $(this).children("span").html();
   infoText=infoText.slice(1,(infoText.length-1));
   //create box
   //$("#organigramm").append(boxHtml);
   $(this).append(boxHtml);
   $("#infobox .text").html(infoText);   
   
   //set box position
   var boxHeight = $("#infobox").height();
   
   var posY = e.pageY - 155;
   var posX = e.pageX - 185;
   
   if ($("#organigramm").css("width") != undefined) {
    posY = parseInt(posY);
    posX = parseInt(posX);
    if (posX > 300)
     posX = 300;
   }
   
   /*
   // if box is near to bottom - show it upside the mousepointer
   if (document.getElementById('content').offsetHeight < document.getElementById('infobox').offsetHeight + posY + 50)
    posY = posY - (document.getElementById('infobox').offsetHeight + 30)
*/
    $("#infobox").css("top", posY); 
   $("#infobox").css("left", posX);
  },
  function(){   
   $("#infobox").remove();    
  }
 );  
});