Conflit Bootstrap et tooltip Dans FullCalendar
Bonsoir à tous,
je test actuellement fullcalendar et je rencontre un conflit en bootstrap et Tootip pour afficher les infobulles
Code:
1
2
3
4
5
6
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.9/index.global.min.js'></script>
<script src='https://unpkg.com/popper.js/dist/umd/popper.min.js'></script>
<script src='https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js'></script>
<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css' rel='stylesheet'>
<link href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css' rel='stylesheet'> |
- Il faut que je commente la ligne
Code:
<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css' rel='stylesheet'>
pour que les infobulles fonctionne.Mais j'ai besoin de bootstrap sur le reste de ma page .
Je me suis dit je vais aussi utiliser que bootstrap pour les infobulles dans fullcalendar, mais je n'arrive pas a savoir comment faire pour afficher infobulle avec boostrap depuis Calendar;
la partie code de fullcalendar (JavaScript) pour afficher infobulle
Code:
1
2
3
4
5
6
7
8
9
10
| //themeSystem: 'bootstrap5',
eventDidMount: function(info) {
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
//info.event.setProp('display','block');
}, |
Merci d'avance pour vos aides et vos explications.
guigui69
