Всплывающая подсказка для полноэкранного просмотра в году

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

eventMouseover: function(calEvent,jsEvent) {
            xOffset = 10;
            yOffset = 30;
            $("body").append(calEvent.tooltip);
            $("#tooltip")
                .css("top",(jsEvent.clientY - xOffset) + "px")
                .css("left",(jsEvent.clientX + yOffset) + "px")
                .fadeIn("fast");
    },
    eventMouseout: function(calEvent,jsEvent) {
        $("#tooltip").remove(); 
    }

Ответ 1

eventMouseover: function(calEvent, jsEvent) {
    var tooltip = '<div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;">' + calEvent.title + '</div>';
    var $tooltip = $(tooltip).appendTo('body');

    $(this).mouseover(function(e) {
        $(this).css('z-index', 10000);
        $tooltip.fadeIn('500');
        $tooltip.fadeTo('10', 1.9);
    }).mousemove(function(e) {
        $tooltip.css('top', e.pageY + 10);
        $tooltip.css('left', e.pageX + 20);
    });
},

eventMouseout: function(calEvent, jsEvent) {
    $(this).css('z-index', 8);
    $('.tooltipevent').remove();
},

Ответ 2

Вы можете использовать атрибут title html без какой-либо подсказки lib:

$('#calendar').fullCalendar({
    events: [
        {
            title: 'My Event',
            start: '2014-01-01',
            tooltip: 'This is a cool event'
        }
        // more events here
    ],
    eventRender: function(event, element) {
        element.attr('title', event.tooltip);
    }
});

Ответ 3

Начиная с версии 1.5, вы можете использовать qtip (я также использую подвыпи, но он должен работать с подсказкой), чтобы отображать подсказку о событии:

$('#calendar').fullCalendar({
    events: [
        {
            title: 'My Event',
            start: '2010-01-01',
            description: 'This is a cool event'
        }
        // more events here
    ],
    eventRender: function(event, element) {
        element.qtip({
            content: event.description
        });
    }
});

doc source: http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/

надеюсь, что это поможет

Ответ 4

Здесь другая реализация

eventMouseover: function(calEvent, jsEvent) { var tooltip = '<div class="tooltipevent" style="width:130px;height:100px;background:#aed0ea;position:absolute;z-index:10001;"> Title: ' + calEvent.title + '</div>'; var $tool = $(tooltip).appendTo('body');
$(this).mouseover(function(e) {
    $(this).css('z-index', 10000);
            $tool.fadeIn('500');
            $tool.fadeTo('10', 1.9);
}).mousemove(function(e) {
    $tool.css('top', e.pageY + 10);
    $tool.css('left', e.pageX + 20);
});
},
eventMouseout: function(calEvent, jsEvent) {
$(this).css('z-index', 8);
$('.tooltipevent').remove();
},

Ответ 5

eventMouseover: function(calEvent, jsEvent) { var tooltip = '<div class="tooltipevent" style="width:130px;height:100px;background:#aed0ea;position:absolute;z-index:10001;"> Title: ' + calEvent.title + '</div>'; var $tool = $(tooltip).appendTo('body');
$(this).mouseover(function(e) {
    $(this).css('z-index', 10000);
            $tool.fadeIn('500');
            $tool.fadeTo('10', 1.9);
}).mousemove(function(e) {
    $tool.css('top', e.pageY + 10);
    $tool.css('left', e.pageX + 20);
});
},
eventMouseout: function(calEvent, jsEvent) {
$(this).css('z-index', 8);
$('.tooltipevent').remove();
},

Предположим, что в этом решении я хочу добавить поля title, description, startdate, enddate, eventstatus и т.д. И т.д. Так как это сделать? пожалуйста помоги.