Impostare un tooltip su jQuery FullCalendar

FullCalendar è un plugin per jQuery che ci consente di avere un completo calendario nelle pagine web.

Ne abbiamo già parlato in questo articolo dove abbiamo visto come interagire con AJAX e PHP.

Oggi aggiungiamo un piccolo pezzo, e cioè un tooltip al passaggio del mouse.

Non sempre vogliamo vedere tutte le informazioni sulla pagina, e un tooltip da attivare al passaggio del mouse può essere comodo per vedere infomarzioni aggiuntive.

Partiamo da questo HTML, che è lo stesso basico HTML:

<style>
    #script-warning { display: none;background: #eee;border-bottom: 1px solid #ddd;padding: 0 10px;
                  line-height: 40px;text-align: center;font-weight: bold;font-size: 12px;color: red; }
    #loading { display: none;position: absolute;top: 10px;right: 10px; }
</style>
<div id="script-warning"><h2>ERRORE</h2></div>
<div id="loading"><h2>Loading...</h2></div>
<div id="calendar"></div>

Bene, a questo punto aggiungiamo l'evento eventMouseover per creare il tooltip; e l'evento eventMouseout per nasconderlo.

Quindi il nostro Javascript diventa così:

         $(function () {
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                defaultDate: new Date(),
                editable: false,
                events: {
                    url: "calendar.php",
                    error: function () {
                        $('#script-warning').show();
                    }
                },
                eventMouseover: function (calEvent, jsEvent, view) {
                    var tooltip = '

' + calEvent.title + '

';
                    $("body").append(tooltip);
                    $(this).mouseover(function (e) {
                        $(this).css('z-index', 10000);
                        $('.tooltipevent').fadeIn('500');
                        $('.tooltipevent').fadeTo('10', 1.9);
                    }).mousemove(function (e) {
                        $('.tooltipevent').css('top', e.pageY + 10);
                        $('.tooltipevent').css('left', e.pageX + 20);
                    });
                },
                eventMouseout: function (calEvent, jsEvent) {
                    $(this).css('z-index', 8);
                    $('.tooltipevent').remove();
                },
                loading: function (bool) {
                    $('#loading').toggle(bool);
                }
            });
        });

In eventMouseover impostiamo l'HTML del tooltip e il CSS; in più anche cosa visualizzare, con la stessa sintassi che usiamo nella pagina.

Molto easy!

Enjoy!