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

Question

我正在从Priming设置fullcalendar事件的工具提示。当我运行代码时，我会在web控制台中看到初始化的工具提示，但当我将鼠标放在事件上时，我看不到它。

我正在用Typescript开发，Priming 7.0。5，6。我正在使用fullcalendar v4。0，我遵循eventRender页面中的工具提示示例。

有我的代码：

贷款组成部分ts

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

贷款组成部分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也不适合我。我必须设置封装：ViewEncapsulation。在我的组件装饰器中没有。

首先在我的组件的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和全日历版本4.3

Answer 2

问题来自CSS！

我不知道为什么，但是当我悬停它的时候，工具提示必须改变它的不透明度，但是它没有生效。我手动更改了不透明度值，它是真正的。