如何解决fullCalendar V3 工具提示在悬停时不显示
Fullcalendar V3 或 V5 是否默认支持工具提示?在文档中,我们应该使用 eventrender,这是否意味着 eventrender 需要与外部库一起使用才能获取工具提示? fullcalendar 是否提供任何事件/Api 来获取工具提示? 或者我们是否需要使用 Bootstrap 或 Jquery 来获取工具提示功能?
下面是我的 js 代码,当我将鼠标悬停在我的事件上时,它不会显示任何工具提示,并且控制台中也没有错误。
JET
function renderData($,self,data) {
self = this;
this.events = [];
data.forEach(element => {
const obj ={};
const extendedProps ={};
var teststr1 = (element.TABLEX_LITM.value).concat(" - ",(element.TABLEX_DOCO.value));
var teststr2 = (element.TABLEX_DL01.value).concat(" - ",teststr1);
obj.title = teststr2,obj.start = new Date(element.TABLEX_DRQJ.value),obj.end= new Date(element.TABLEX_STRT.value),extendedProps.QuantityOrdered = element.TABLEX_UORG.value,extendedProps.QuantityCompleted = element.TABLEX_SOQS.value,obj.extendedProps = extendedProps,events.push(obj);
});
this.calendar = $ ('#calendar').fullCalendar(
{
editable: true,weekends : false,selectable: true,selectHelper:true,timeFormat: 'H(:mm)',displayEventTime: false,header:{
left : 'prev,next,today',center : 'title',right : 'month,agendaWeek,agendaDay'
},events: events,eventRender: function (events,element) {
element.attr('href','javascript:void(0);');
element.click(function() {
$("#startTime").html(formatDate(events.start));
$("#endTime").html(formatDate(events.end));
$("#QuantityOrdered").html(events.extendedProps.QuantityOrdered);
$("#QuantityCompleted").html(events.extendedProps.QuantityCompleted);
$("#eventContent").dialog({ modal: true,title: events.title,width:350});
});
var tooltip = new Tooltip(eventInfo.el,{
// title: eventInfo.event.extendedProps.description,title: eventInfo.events.extendedProps.description,placement: 'top',trigger: 'hover',container: 'body'
});
},});
$('#calendar').fullCalendar({
eventAfterRender: function(event,element) {
$(element).tooltip({
title: event.title,container: "body"
});
}
});
}
$(document).ready(function() {
var chartModel = new ChartModel();
getE1Data(chartModel,(status)=>{
ko.applyBindings(chartModel,document.getElementById('calendar'));
});
});
});
JET
<div class = "container">
<div id = "calendar">
<oj-table id='table' aria-label='Departments Table'
data='[[dataprovider]]'
columns='[[columns]]'
style='width: 100%; height: 700px;'>
</oj-table>
</div>
<div id="eventContent" title="Event Details" style="display:none;">
Start Date: <span id="startTime"></span><br>
Requested Date: <span id="endTime"></span><br>
Quantity Ordered: <span id="QuantityOrdered"></span><br>
Quantity Completed: <span id="QuantityCompleted"></span><br><br>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。