Qtip2 Tooltip Integration mit FullCalendar

Question

Ich versuche Qtip2 Tooltip im FullCalendar jquery Plugin zu implementieren. Die Qtip2 und FullCalendar sind beide sehr nette jQuery Plugin und einfach zu implementieren.

Ich habe Qtip2-Integration in meinem FullCalendar-Plugin wie in ihrer http://qtip2.com/demos Seite vorgeschlagen getan.

Aber selbst in der Demo habe ich einen Fehler gefunden wie, Die Tooltip bewegt sich gerade von den Ereignissen weg (Vor allem wenn ich & auf ein Ereignis schließe und zu einem anderen Ereignis gehe, sieht man, dass es sich von dem wegbewegt Grid)

Ihre Ansicht Quellseite: http://jsfiddle.net/qTip2/T9GHJ/

Schritte Frage zu finden:

1. Klicken Sie auf jeden Fall und schließen Sie den Tooltip
2. A Klicken Sie auf ein anderes Ereignis und schließen Sie den Tooltip und fahren Sie fort.

Ich bin gerade auf diesem für lange Zeit fest. Ich konnte keine Lösung dafür finden. Jede Hilfe dazu wäre sehr willkommen.

Answer 1

Ich habe seit einiger Zeit auch mit Qtips zu kämpfen, aber hier ist der Code, der endlich für mich funktioniert hat. Es verhindert fehlerhaftes und scheinbar zufälliges Verhalten, besonders wenn Sie die Maus bewegen oder die Ereignisse ziehen.

Rufen Sie diese Funktion aus dem eventRender von fullCalendar auf. element ist der zweite Parameter in EventRender-Funktion übergeben, und der Rest sind optional (Optionen title und text, target wie in qTip2 Docs definiert und hideEvents ist eine durch Leerzeichen getrennte Liste von JS-Ereignissen, die die Quick-Info ausblenden, wenn sie werden gefeuert, wie "mousedown mouseup mouseleave").

/** adds a tooltip to a specified element, like an event or resource */ 
function addToolTip(element, o, target, hideEvents) { 
    if (target === undefined || target === null) { 
     target = false; 
    } 
    if (hideEvents === undefined) { 
     hideEvents = "mousedown mouseup mouseleave"; 
    } 
    element.qtip({ 
     content: { 
      title: o.title, 
      text: o.text 
     } 
     , position: { 
      my: "bottom center", 
      at: "top center", 
      target: target // "mouse" is buggy when dragging and interferes with clicking 
      //adjust: { y: -9} 
     } 
     , style: { 
      tip: { corner: 'bottom center' }, 
      classes: 'qtip-light qtip-shadow' 
     }, 
     show: { 
      effect: function() { 
       $(this).fadeTo(300, 1); 
      }, 
      solo: true, 
      delay: 200 
     }, 
     hide: { 
      effect: true, 
      event: hideEvents // otherwise stays while dragging 
     } 
    }); 
}