Question

Im using http://mbielanczuk.com/jquery-gantt/ plugin

Is anyone there have an idea how to change the mouseover hint to qTip2 ?

Answer 1

FINALLY I’ve got it!! 🙂

Here’s how to change the fn-gantt-hint by qtip2. Open the js file and seach for;

if (desc)
 {
   bar
...
 }
return bar;

then remove or just comment this;

.mouseover(function(e){
    var hint = $("<div class='fn-gantt-hint' />").html(desc);
    $("body").append(hint);
    hint.css('left', e.pageX);
    hint.css('top', e.pageY);
    hint.show();
  })
  .mouseout(function(){
    $(".fn-gantt-hint").remove();
  })
  .mousemove(function(e){
     $('.fn-gantt-hint').css('left', e.pageX);
     $('.fn-gantt-hint').css('top', e.pageY+15);
 });

with this;

bar.qtip({
    content: desc,
    position: {
        my: 'top left',
        target: 'mouse',
        viewport: $(window), // Keep it on-screen at all times if possible
        adjust: {
            x: 10,  y: 10
        }
    },
    hide: {
        fixed: true // Helps to prevent the tooltip from hiding ocassionally when tracking!
    },
    style: 'ui-tooltip-shadow'
});

and then your DONE! 🙂 cheers! A gantt chart with a qtip2! credit to mbielanczuk by sharing the plugins and to qtip2 too! I love you guys! :))