Question

我想在我的fullcalendar中使用qtip2，但我遇到了eventMouseout（）的问题。

当我在附近的事件之间切换时，qtip无法正确显示。

eventMouseover: function(data, event, view) {
            var content = '<h3>'+data.title+'</h3>' + 
                '<p><b>Start:</b> '+data.start+'<br />' + 
                (data.end && '<p><b>End:</b> '+data.end+'</p>' || '');

            tooltip.set({
                'content.text': content
            })
            .reposition(event).show(event);
},
eventMouseout: function(data, event, view) {tooltip.hide()}

Answer 1

这是获取事件工具提示的另一种方法

可以在没有qtip2插件的情况下完成，这是我的代码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();

    }

Answer 2

我解决该问题的方法如下：

eventMouseover: function (data, event, view) {
        $('#ui-tooltip-0').css("display", "block");
        var content = 'Fetcha: <b>' + data.departureDate.split(' ')[0] + '</b> ' + 'Desde: <b>' + data.title + '</b>' +
              '<p><b>#viaje: ' + data.id + '</b><br /><b>' + $('#ddlEndTerminal option:selected').text().split(',')[0] + ': ' + data.arrivalDate.split(' ')[1]
            + '</b><br /><b>' + $('#ddlStartTerminal option:selected').text().split(',')[0] + ': ' + data.departureDate.split(' ')[1];

        tooltip.set({
            'content.text': content
        })
        .reposition(event).show(event);


    },
    eventMouseout: function (data, event, view) {   



        $('#ui-tooltip-0').css("display","none");

    },

带有Qtip2的Fullcalendar中的EventMouseout

2 个答案: