QTip показывает в неправильном месте - PullRequest
Новая
       29

QTip показывает в неправильном месте

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

Я пытаюсь отобразить qtip в ответ на нажатие пользователем дня в fullcalendar.

Это правильно работает в chrome, но в Firefox и Internet Explorer qtip открывается в неправильном месте.

Это можно увидеть, нажав в разные дни, иногда qtip открывается в неправильном месте, в других случаях он открывается, а затем сразу закрывается.

Такое поведение можно наблюдать, если не использовать $(this).qtip('destroy') икогда определено solo: false.

Кажется, что это происходит при первом щелчке внутри ячейки, если затем переместить мышь в эту же ячейку и снова щелкнуть, qtip отобразится в правильном положении.Затем эту ячейку продолжайте корректно работать до тех пор, пока страница не будет обновлена.

Полный пример доступен по адресу https://gist.github.com/1467702

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="fullcalendar.css">
    <link rel="stylesheet" type="text/css" href="jquery.qtip.css">
</head>
<body>
    <div id="calendar"></div>

    <script type="text/javascript" src="jquery-1.6.3.js"></script>
    <script type="text/javascript" src="jquery.qtip.js"></script>
    <script type="text/javascript" src="fullcalendar.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#calendar').fullCalendar({
                dayClick: dayclick
            });
        });

        function dayclick(date, allday, jsevent) {
            var randomContent = new Date().valueOf().toString();
            $(this).qtip({
                overwrite: true,
                content: {
                    text: randomContent,
                    title: {
                        text: 'Testing',
                        button: 'Close'
                    }
                },
                show: {
                    solo: true,
                    event: 'click',
                    ready: true
                },
                style: {
                    tip: true
                },
                position: {
                    viewport: $(window),
                    target: 'mouse',
                    my: 'bottom center',
                    at: 'top center',
                    adjust: {
                        mouse: false
                    }
                },
                hide: {
                    fixed: true,
                    delay: 300
                },
                events: {
                    hide: function () {
                        $(this).qtip('destroy');
                    }
                }
            }, jsevent);
        }
    </script>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 06 февраля 2018

Дорогой друг, ты должен добавить ссылку qtip css, тогда она будет отлично работать ... 

<link href = "https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css" />
0 голосов
/ 18 июня 2013

Это не будет работать таким образом. потому что у вас нет удержания элемента внутри функции dayClick.

Попробуйте, если ваше требование вас устраивает! 

$(document).ready(function () {

/* Dont care about this code for generating event, Starts Here */
var myEvents = [];
var date = new Date();
var y = date.getFullYear();
var length = 12;

for (var month = 1; month < length; month++) {
    var month = (month <= 9) ? '0' + month : month;
    var startdate = y + '-' + month + '-10';
    var enddate = y + '-0' + month + '-15';
    myEvents.push({
        title: 'event',
        start: startdate,
        //end: enddate,
        description: 'event Of ' + startdate,
        allDay: true
    });
}

/* Dont care about this code for generating event, Ends Here */


$('#myCalendar').fullCalendar({
    events: myEvents,
    eventRender: function(event, element) {
        element.qtip({
           show: 'click',
           hide: { when: { event: 'unfocus' } },
           content: event.description
        });
    }
});

});

См. Это Fiddle

...