Qtip с полным календарем - PullRequest
Новая
       16

Qtip с полным календарем

2 голосов
/ 23 декабря 2011

Я пытаюсь выучить qtip для fullcalendar, но, похоже, он не работает.Я перепробовал все уроки / примеры, но ничего не работает, как говорится.Я использую следующий код, но я пробовал много других альтернатив.Я делаю какие-либо очевидные ошибки? 

dayClick: function(date, allDay, jsEvent, view) { 
    $(this).qtip({ 

        content:"",
        overwrite: false,
        position: { corner: { target: 'topMiddle', tooltip: 'bottomMiddle' },
        viewport: $(window), // Keep it on-screen at all times if possible
        adjust: { x: 10, y: 10 } },
        show: { when: 'click', // Don't specify a show event
        ready: true // Show the tooltip when ready },
        hide: { when: 'click' },
        style: { 
        border: {  width: 5, radius: 10 }, 
        padding: 10, 
        textAlign: 'center', //tip: true, 
        // Give it a speech  bubble tip with automatic corner detection name: 'cream' 
        // Style it according to the preset  'cream' style } }); }

Ответы [ 2 ]

2 голосов
/ 29 декабря 2011

Я использовал qTip в своем приложении fullCalendar, например:

В eventRender: 

eventRender: function(event, element) {
    element.qtip({
                    content : [HTML SHOWING CONTENT],
                    position: {[position info]}
                    ... rest of settings...
                 });
    },

Затем, когда я хочу показать qTip (для меня в eventMouseover) 

eventMouseover: function(event) {
        jQuery(this).qtip();
    },
eventMouseout: function(event) {
        jQuery(this).qtip().hide();
    },

То есть .. В eventRender настройте свой qtip с помощью element.qtip, а в dayClick просто вызовите функцию $ (this) .qtip ().Не уверен, почему я так сделал, но это работает:)

1 голос
/ 09 июня 2012

Убедитесь, что в заголовке документа указаны правильные файлы CSS и JS. 

  <head>
    <!-- STYLESHEETS //-->
      <link type="text/css" rel='stylesheet' href="style/jquery.qtip.min.css">

    <!-- JAVASCRIPTS //-->
      <script type="text/javascript" src="scripts/jquery.qtip.min.js"></script>
  </head>

Если они у вас есть, добавьте следующую строку в начало функции eventRender 

//Add the qtip to the eventRender function:
    element.qtip({ style: 'ui-tooltip-shadow ui-tooltip-jtools', content: event.description});

Вот так. 

eventRender: function(event, element) {
//Add the qtip to the event when renered
element.qtip({ style: 'ui-tooltip-shadow ui-tooltip-jtools', content: event.description});
...