我想在fullcalendar of Adam Shaw中的事件中显示引导工具提示。我试过这段代码:
eventMouseover: function (event, jsEvent) {
$(this).tooltip();
$(this).css('rel', 'tooltip');
$(this).tooltip({
selector: '[rel=tooltip]'
});
},
但它不起作用。这有什么不对?
答案 0 :(得分:10)
你可以稍微缩短你的答案:
eventAfterRender: function (event, element) {
$(element).tooltip({title:event.title, container: "body"});
}
答案 1 :(得分:6)
我得到了它的工作:
eventRender: function (event, element) {
var tooltip = event.Description;
$(element).attr("data-original-title", tooltip)
$(element).tooltip({ container: "body"})
}
答案 2 :(得分:3)
我的解决方案是:
$('#calendar').fullCalendar({
...
events: [
{"title":"foo",
"description":"bar<br>baz",
"start":"2015-08-28 17:45:00",
"url":"foo"},
{ ...
}
],
eventMouseover: function(event, element) {
$(this).tooltip({title:event.description, html: true, container: "body"});
$(this).tooltip('show');
}
});
答案 3 :(得分:1)
答案 4 :(得分:1)
在日历4中,我只是在这里回复: Tooltip in fullcalendar not working
使用eventRender函数:
eventRender: function (info) {
$(info.el).tooltip({ title: info.event.title });
}
答案 5 :(得分:1)
对于新版本Full calendar version 5
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new Calendar(calendarEl, {
plugins: [ momentPlugin, dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin ],
initialView: 'dayGridMonth',
themeSystem: 'bootstrap',
height: 600,
selectable:true,
editable:true,
headerToolbar: {
left: 'today,prev,next',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
eventClick: function(info) {
var eventObj = info.event;
console.log(eventObj.extendedProps.description);
},
eventDidMount: function(info) {
$(info.el).tooltip({
title: info.event.title,
});
},
events: '/url',
eventColor: '#378006',
});
calendar.render();
});
答案 6 :(得分:1)
我使用 Bootstrap 和 fullcalendar 5 的解决方案:
eventDidMount: function (info) {
$(info.el).popover({
animation: true,
delay: 300,
content: '<b>Title</b>:' + info.event.title + "</b>:",
trigger: 'hover'
});
},