Question

我正在尝试将qTip2与jQuery完整日历集成，但我无法在完整日历上显示事件的qTip。我按照Full Calendar eventRender文档中给出的相同步骤进行操作。这是我的代码：

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://cdn.jsdelivr.net/qtip2/2.2.0/basic/jquery.qtip.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/qtip2/2.2.0/basic/jquery.qtip.min.css">
<script src="includes/jquery-ui.js"></script>
<script src="includes/fullcalendar.min.js"></script>
<script>
    $(document).ready(function(){
        $(".calender").fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek'
            },
            editable: true,

            events: "getjson.php",

            eventRender: function(event,element){
                element.qtip({
                    content: event.description,
                    style: {
                        background: 'black',
                        color: '#ffffff'
                    },
                    show: {solo: true},
                    position: {
                        corner: {
                            target: 'center',
                            tooltip: 'bottomMiddle'
                        }
                    }
                });
            },

            loading: function(bool){
                if(bool) $(".loading").show();
                else $(".loading").hide();
            },

            disableDragging: true
        });

我无法弄清楚如何将qtip集成到我的日历上。

Answer 1

以下是我在fullcalendar事件http://jsfiddle.net/539jx/3/

中提供工具提示的代码

 eventMouseover: function (data, event, view) {

    tooltip = '<div class="tooltiptopicevent" style="width:auto;height:auto;background:#feb811;position:absolute;z-index:10001;padding:10px 10px 10px 10px ;  line-height: 200%;">' + 'title: ' + ': ' + data.title + '</br>' + 'start: ' + ': ' + data.start + '</div>';


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


},
eventMouseout: function (data, event, view) {
    $(this).css('z-index', 8);

    $('.tooltiptopicevent').remove();

}

q没有出现在jQuery完整日历上

1 个答案: