I'm trying to add a popover to an event in a resource timeline and I would like to know what the correct way is to do that.
I'm using fullcalendar/vue ^5.3.1 in Vue ^2.6.11 with ^2.1.0 of bootstrap-vue.
After reading this question I have the following, which seems to work, but doesn't seem like it's the right way to do it.
I think it's the use of the propsData
and .$mount()
that makes it feel like there must be a better, more idiomatic approach? In addition, it doesn't seem possible to make the content html either?
In the component:
<script>
import { BPopover } from 'bootstrap-vue'
</script>
In calendarOptions:
eventDidMount: function (info) {
new BPopover({
propsData: {
title: info.event.extendedProps.title,
content: info.event.extendedProps.projectName,
triggers: 'hover',
target: info.el,
}
}).$mount()
}
Any thoughts greatly appreciated.
Many thanks.
Since posting this question, we've switched from bootstrap-vue to vuetify on this project but the solution is still most likely relevant in that we have used the
eventContent
slot to add av-tooltip
I believe the slots are a new v5 feature. I came across this in this issue and you can see an example of it being used in the demo app too.
The docs could definitely be better!