Add title when hovering over event

Question

I need that when passing the mouse I can see the name of the event, at the moment if the name is too big I can not see, as in the example below:

I’m using the fullcalendar to manage my event calendar, and my code is configured like this:

        $('#calendar').fullCalendar({
        // put your options and callbacks here
        selectable: true,
        editable: true,
        events: [
        @foreach ($celula->reunioes as $reuniao)
        {
            title: '{{$reuniao->TXT_TEMAX_REUNI}}',
            start: '{{$reuniao->getStart}}',
            allDay: true,
            id: '{{$reuniao->COD_IDENT_REUNI}}',
            className: 'bgm-cyan'
        },
        @endforeach
        ],
        select: function(start, end, allDay) {
           startDisplay = $.fullCalendar.formatRange(start, start, 'DD/MM/YYYY');
           $("#addEvent").show();
           $("#editEvent").hide();
           $("#addNew-event").modal("show");
           $("#addNew-event input:text").val("");
           $("#getStart").val(start);
           $(".getStartDate").val(startDisplay);
           $("#getEnd").val(start);
           $('input[type=text][name=TMP_HORAX_REUNI]').val("{{$celula->TMP_HORAX_CELUL}}");
           $('input[type=text][name=TXT_RUAXX_REUNI]').val("{{$celula->TXT_RUAXX_CELUL}}");
           $('input[type=text][name=TXT_BAIRR_REUNI]').val("{{$celula->TXT_BAIRR_CELUL}}");
           $('input[type=text][name=TXT_CIDAD_REUNI]').val("{{$celula->TXT_CIDAD_CELUL}}");
           $('input[type=text][name=TXT_ESTAD_REUNI]').val("{{$celula->TXT_ESTAD_CELUL}}");
           $('input[type=text][name=TXT_NUMER_REUNI]').val("{{$celula->TXT_NUMER_CELUL}}");
           $('input[type=text][name=TXT_COMPL_REUNI]').val("{{$celula->TXT_COMPL_CELUL}}");
       },
       eventClick: function(event, element) {
          $("#addEvent").hide()
          $("#editEvent").show().data("ev", event);
          $("#addNew-event").modal("show");
          $("#addNew-event input:text").val("");
          $("#eventName").val(event.title);
      }
  });

So I need to get the whole event title to appear when I move the mouse. How to do this ?

Answer 1

Good morning!

I already had to do this in an old project I did. Follow the code, I hope it helps. : D

eventMouseover: function (calEvent, jsEvent) {
    var data = new Date(calEvent.data); //formatar data - inicio
    var d = data.getDate();
    d += 1;
    var m = data.getMonth();
    m += 1; // JavaScript months are 0-11
    var y = data.getFullYear();
    if (d < 10) {
    d = "0" + d;
    }
    if (m < 10) {
    m = "0" + m;
    }
    var data_formatada = (d + "/" + m + "/" + y); //formatar data - fim

    var horario;
    if (calEvent.allDay == true) {
    horario = "Dia todo";
    } else {
    horario = 'Hora:</label> <label class="c2">' + calEvent.hora + " | " + calEvent.horafim;
    }

    var tooltip = '\
                    <div class="tooltipevent tooltip_agenda">\n\
                    <label class="titulo">' + calEvent.descricao + '</label><br/>' +
            '<label class="c1">Data:</label> <label class="c2">' + data_formatada + '</label><br/>\n\
                    <label class="c1">' + horario + '</label><br/>\n\
                    <label class="cliente"> ' + calEvent.cliente + '</label></div>';
    $("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();
            $('tooltip').remove();
            },

Answer 2

I used this code within the eventRender.

 $(element).tooltip({title: event.title});