我的全日历工具提示没有结果

Question

我正在使用 primeng 的全日历设置事件的工具提示。当我运行我的代码时，我看到我的工具提示已初始化到 Web 控制台，但是当我将鼠标移到某个事件上时我看不到它。

我正在使用 Typescript 进行开发，Primeng 7.0.5，Angular 6. 我正在使用 PrimeNg 的 fullcalendar v4.0，我遵循 eventRender 页面中的工具提示示例。

有我的代码：

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>

结果进入我的控制台：


    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

目前它已初始化，但当我的鼠标在事件上时，没有附加内容

你遇到过这样的问题吗？

Answer 1

问题来自 CSS !

我不知道为什么，当我将鼠标悬停在工具提示上时，它必须更改其不透明度，但它没有生效。我手动更改了不透明度值，它是正常的。

Answer 2

我也遇到了同样的问题，甚至设置 css 对我也不起作用。我必须在组件装饰器中设置 encapsulation: ViewEncapsulation.None。

首先在我的组件的 css 文件中。我已经添加

.tooltip{
    opacity: 1 !important;
}

然后在我的组件的 ts 文件中添加了

@Component({                 
   encapsulation: ViewEncapsulation.None
})

我的事件渲染函数是

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

注意：我使用的是 Augular 版本 8.2 和 Full-Calendar 版本 4.3

我的全日历工具提示没有结果

I don't have result for my fullcalendar tooltip

tooltip

fullcalendar

typescript

primeng

angular