CODEWITHSUNDEEP
angularjsfullcalendar
tharindu
tharindu

Reputation: 523

Usage of eventMouseEnter in V4 of fullcalendar

I am using V4 of fullcalnedar and I want to display a popup window when the mouse tip hover an event displayed in the calendar and I am using the following code lines. console.log() line appears correctly. But popup doesn't occur. Any idea about this issue?

eventMouseEnter: function (info) {
    console.log("-------hover--------");
    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: ' + ': ' + info.event.title + '</br>' + 'start: ' + ': ' + info.event.start + '</div>';
    console.log("-------"+tooltip);

    $("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);
    });
},
eventMouseLeave: function (data, event, view) {
    $(this).css('z-index', 8);

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

UPDATED

With the above code snippet I can have the pop - up. But its not very clearly observed. The screen gets blinked very speedily so that its really hard to see the screen. Do you have any idea?

UPDATED

<script>
$scope.displayCalendar = function()
{
 var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'dayGrid' ],
    defaultView: 'dayGridMonth',
    defaultDate: '2019-06-12',
    eventRender: function(info) {
      var tooltip = new Tooltip(info.el, {
        title: info.event.extendedProps.description,
        placement: 'top',
        trigger: 'hover',
        container: 'body'
      });
    }
events: [
      {
        title: 'All Day Event',
        description: 'description for All Day Event',
        start: '2019-06-01'
      },
      {
        title: 'Long Event',
        description: 'description for Long Event',
        start: '2019-06-07',
        end: '2019-06-10'
      }
       ]
});
calendar.render();

}

Upvotes: 1

Views: 6722

Answers (2)

Pratik Anand
Pratik Anand

Reputation: 687

<script>
eventMouseEnter: function (info) {
        // Display description when hovering over an event
        descriptionEl.innerHTML = info.event.extendedProps.description;
        descriptionEl.style.display = 'block';
        descriptionEl.style.left = (info.jsEvent.pageX + 10) + 'px';
        descriptionEl.style.top = (info.jsEvent.pageY + 10) + 'px';
    },
    eventMouseLeave: function () {
        // Hide description when mouse leaves an event
        descriptionEl.style.display = 'none';
    }
</script>


<style>
    #description {
        display: none;
        position: absolute;
        background-color: #fafde9;
        border: 1px solid #090034;
        padding: 5px;
    }
</style>

Add this block to the HTML

Upvotes: 0

tharindu
tharindu

Reputation: 523

After spending more than one and half days I found that the issue is in the CSS related to tooltip. Therefore by adding the following snippet to CSS file I could get over the issue

.tooltip
{
opacity: 1;

}

Upvotes: 2

Related Questions