Hello I'am trying to implent the FullCalendar Reactive following the documentation available on the website.However i can't unveil the events tooltip functionality.According to the documentation i simply have to add in the Advanced Options the following statement:
eventRender: function(info) { var tooltip = new Tooltip(info.el, { title: info.event.extendedProps.description, placement: 'top', trigger: 'hover', container: 'body' }); console.log(tooltip); }
But according to the console the TooTip () function does not exist in the Component. I've read a lots of forums and tried diferent solutions and it looks like nothing works.As any one came across with this issue?
Hello Jorge,
From what I see your code is very similar to this example: https://codepen.io/pen/?&editors=001
However, the tooltip is an element that is not part of the fullCallendar library. Is an external JS as you can check here
You can check if you are loading correctly these libraries or the ones you are using?
Thank for your reply.this is what i was looking for. In fact the component is missing this plugins (poper.min and tooltip.min).
Hoever adding this scripts and using the code above and other's did not solve the problem.I consult another forum (https://stackoverflow.com/questions/56866108/tooltips-not-working-in-fullcalendar-when-i-use-bootstrap-css) that indicates that the bootstrap.min causes a conflit with the tooltip.min because both have the same css class for the tooltip. Even so following this solution (by removing the bootstrap.min) it didin't work.Other things that i tried: https://codepen.io/IsmiKin/pen/WbOeGw
https://github.com/fullcalendar/fullcalendar-site-static/blob/master/_docs-v3/event-display/event-tooltip-demo.html
Hi Jorge,
I updated the demo page of fullcalendar with a tooltip example.
https://mediaweb-creations.outsystemscloud.com/FullCalendarReactiveSample/EventsTolltip
In this example, we are using tippy JS but the logic should e the same.
I also attach the example file ;)
Best regards
Nelson Rodrigues
This definetly helped but it still does work perfectly.For some reason it only renders the description of forced events initialized in the Advanced Options (And like you did in the Demo). Does not work for events that come from the DataBase. It does not recognizes the description parameter.I will try to work arround it, but if you have any insight please let me know.
Jorge Ribeiro
In my example, the events are populated in the input parameter "EventSource" with the EventList variable, not in AdvancedOptions.
If you check this variable you can see that uses a structure and that structure has a "description" field.
Do you have content in that field?
Nelson i seem to have found my problem. I has using the NewEventSourceUrl() to populate the events in the calendar.Afther review my code i found out that i has doing the mapping of the "description" in the event structure incorrectly.
Problem solved :)Thank you very much for your help!Have nice weekendBest Regards
Hi @Nelson Rodrigues ,
I want to add a tooltip for the title. Please guide me how to do this.
Regards,
Shweta
Hi Shweta,
I think it was better to create a new forum post, since this one is already old and solved.
Although I think if you check our demo asset you will understand how to use the tooltip:
If you need more help, please, create a new post.
Cheers!
Hi Jorge, check this post
and this link: https://codepen.io/carloshlessa/pen/NWRGZpJ
This is done using a JS library tooltip.js add the js code on your app
Carlos Lessa
Thank for your reply.I have check your solution but for the same reassons that i mentioned in the previous post it did work as well.