$(document).ready(function() {
  $('.toolTip').hover(
    function() {
    this.tip = this.title;
    $(this).append(
     '<div class="toolTipWrapper">'
        +'<div class="toolTipTop">Informatie</div>'
        +'<div class="toolTipMid">'
          +this.tip
        +'</div>'
        +'<div class="toolTipBtm"></div>'
      +'</div>'
    );
    this.title = "";
    this.width = $(this).width();
    offsetHor = -22; // default.
    //ttPosition = $(".toolTip").position();
    ttPosition = $(".toolTip").offset({ scroll: false });
    ttWidth = $('.toolTipWrapper').width();
    windowWidth = $(window).width();
    
    if ((ttPosition.left + offsetHor + ttWidth) >= windowWidth) {
    	offsetHor = - ttWidth - offsetHor; 
    }
    $(this).find('.toolTipWrapper').css({left:this.width+offsetHor})
    $('.toolTipWrapper').fadeIn(300);
  },
    function() {
      $('.toolTipWrapper').fadeOut(100);
      $(this).children().remove();
        this.title = this.tip;
      }
  );
});
