FullCalendar와 Qtip2 툴팁 통합

Question

FullCalendar jquery 플러그인에 Qtip2 툴팁을 구현하려고합니다. Qtip2와 FullCalendar는 모두 좋은 jQuery 플러그인이며 쉬운 구현입니다.

http://qtip2.com/demos 페이지에 제안 된대로 FullCalendar 플러그인에서 Qtip2 통합을 완료했습니다.

심지어 데모에서와 마찬가지로 오류 메시지가 나타납니다. 툴팁은 이벤트에서 멀리 떨어져 있습니다 (특히 & 한 이벤트를 닫고 다른 이벤트로 이동하면 볼 수 있습니다. 그리드)

그들의 소스보기 페이지 : 어떤 경우에

가

1. 을 클릭하고 도구 설명
2. 을 닫습니다 : http://jsfiddle.net/qTip2/T9GHJ/

   단계 문제를 찾을 수 nd 다른 이벤트를 클릭하고 툴팁을 닫은 후 계속하십시오.

저는 오랫동안이 문제에 매달 렸습니다. 나는 그 해결책을 찾을 수 없었다. 이것에 대한 도움은 크게 감사 할 것입니다.

Answer 1

나는 약간의 시간 동안 qtips에 어려움을 겪어 왔지만, 마침내 나를 위해 일한 코드가있다. 특히 마우스를 움직이거나 이벤트를 드래그 할 때 버그와 겉으로보기에는 무작위적인 동작을 방지합니다.

fullCalendar의 eventRender에서이 함수를 호출하십시오. element은 eventRender 함수에 전달 된 두 번째 매개 변수이며 나머지는 선택적입니다 (나머지는 옵션입니다 (툴 팁의 title 및 text, target은 qTip2 docs에 정의 된 옵션 객체이고 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 
     } 
    }); 
}