I don't have result for my fullcalendar tooltip

2
votes

I'm setting tooltips on events with fullcalendar from primeng. When i run my code, i see my tooltip initialized into the web console but i can't see it when i passed my mouse over an event.

I am developing with Typescript, Primeng 7.0.5, Angular 6. I am using the fullcalendar v4.0 from PrimeNg and i follow the tooltip example which is in the eventRender page.

There is my code:

loan.component.ts


    eventRender: function(info) {
                 let tooltip = new Tooltip(info.el, {
                 title: 'test',
                 placement: 'top',
                 trigger: 'hover',
                 container: 'body'
                 });
                 console.log(tooltip);
             }

loan.component.html

<div id="calendar" class="row col-xl-12">        
    <p-fullCalendar [events]="events" [options]="options"></p-fullCalendar>
</div>

the result into my console : 


    Tooltip {show: ƒ, hide: ƒ, dispose: ƒ, toggle: ƒ, updateTitleContent: ƒ, …}
        dispose: ƒ ()
        hide: ƒ ()
        options: {container: "body", delay: 0, html: false, placement: "top", 
        title: "test", …}
        reference: a.fc-day-grid-event.fc-h-event.fc-event.fc-not-start.fc-end
        show: ƒ ()
        toggle: ƒ ()
        updateTitleContent: ƒ (title)
        _events: (2) [{…}, {…}]
        _isOpen: false
        _popperOptions: {}
        _setTooltipNodeEvent: ƒ (evt, reference, delay, options)
        __proto__: Object

For the moment it is initialized but when my mouse is on an event, nothing append

Did you ever had a problem like this ?

2
angulartypescriptfullcalendartooltipprimeng
any errors in your console? Did you include tooltip.js in your page? – ADyson
I haven't any error into my console, i implemented Tooltip in my loan.component.ts file like this: import Tooltip from 'tooltip.js'; – Dervillers Mattéo

2 Answers

3
votes

The problem comes from the CSS !

I don't know why but the tooltip have to change its opacity when i hover it but it don't take effect. I changed manually the opacity value and it's fonctionnal.

0
votes

I too had the same problem and even setting css didn't work for me. I had to set encapsulation: ViewEncapsulation.None in my component decorator.

Firstly in my components's css file. I have added 

.tooltip{
    opacity: 1 !important;
}

Then in my component's ts file I have added 

@Component({                 
   encapsulation: ViewEncapsulation.None
})

And my event render function is

eventRender(info) {    
    let tooltip = new Tooltip(info.el, {
    title: '<h6>test</h6>',
    placement: 'top',
    trigger: 'hover',
    container: 'body',
    html: true
    });
}

Note: I am using Augular version 8.2 and Full-Calendar version 4.3