2016-07-01 9 views
2

FullCalendar jqueryプラグインにQtip2ツールチップを実装しようとしています。 Qtip2とFullCalendarはどちらも本当に素敵なjQueryプラグインで、簡単に実装できます。FullCalendarとのQtip2ツールチップの統合

http://qtip2.com/demosページで提案されているように、私はFullCalendarプラグインでQtip2の統合を行っています。

でもデモでも、ツールチップはイベントから離れています(特に&をクリックして別のイベントに移動すると、 Aのいずれかのイベントに

  1. クリックし
  2. ツールチップを閉じて:問題を見つけるためhttp://jsfiddle.net/qTip2/T9GHJ/

    ステップ:グリッド)

    彼らのソースを表示ページ他のイベントをクリックし、ツールチップを閉じて同じ操作を続行します。

私はちょうどこれを長年にわたって固執しています。私はその解決策を見つけることができませんでした。これについての助けがあれば、大いに感謝します。

答えて

0

私はしばらくqtipsに苦しんできましたが、ここでは最終的に私のために働いたコードです。特に、マウスを動かしたり、イベントをドラッグしたりするとき、バグや一見ランダムな動作を防ぎます。

fullCalendarのeventRenderからこの関数を呼び出します。 はeventRender関数で渡される2番目のパラメータで、残りはオプションです(オプションオブジェクト(ツールヒントのtitletexttargetはqTip2ドキュメントで定義されています)。hideEventsはスペースで区切られたJSイベントのリストで、は、例えば、"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 
     } 
    }); 
} 
関連する問題