#css #bootstrap-4 #fullcalendar #tooltip
#css #bootstrap-4 #полный календарь #всплывающая подсказка
Вопрос:
Я работаю над частным проектом Codeigniter и хочу отобразить некоторые события в моем представлении с помощью fullcalendar.
Пока — все хорошо. Но я хочу отображать больше информации, чем название события и время, я хочу отображать дополнительную информацию, такую как комната и лектор. Документы fullcanender рекомендуют это решение: событие-всплывающая подсказка-демонстрация . Но это работает только до тех пор, пока я не использую bootstrap. Как только я интегрирую bootstrap.css, всплывающие подсказки не будут отображаться. Даже официальный пример на codepen ведет себя так же, когда вы добавляете Bootstrap. Есть идеи? Заранее большое вам спасибо!
Редактировать: Кстати, вот некоторая дополнительная информация, которая может помочь. Когда я зависаю над событием, пока bootstrap.css включен, в инспекторе отображается следующий элемент:
<div class="tooltip" role="tooltip" id="tooltip_zvh8nhyqlo" aria-hidden="false" x-placement="top" style="position: absolute; will-change: transform; visibility: visible; top: 0px; left: 0px; transform: translate3d(488px, 179px, 0px);"><div class="tooltip-arrow" style="left: 65px;"></div><div class="tooltip-inner">Lecture</div></div>
Так что, похоже, это похоже на отступ.
И вот порядок моего «импорта»:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.3.0/main.min.css">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.3.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.3.0/locales-all.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>
Как только я раскомментирую первую строку (bootstrap.css), всплывающие подсказки будут показаны. Аналогичное поведение в официальном примере codepen. Не имеет значения, использую ли я Bootstrap 4 или 3
Комментарии:
1. насколько я знаю, я использовал bootstrap tooltip и bootstrap modal dialog в одном из моих проектов, но они не могут работать вместе, они показывались одновременно.. но ваш случай отличается, вы говорите, что всплывающая подсказка не будет отображаться при включении bootstrap.css, в этом случае я бы сказал, что должны быть проблемы с кодом. Вам нужно поместить часть вашего кода, чтобы мы могли видеть реальную проблему. Спасибо 🙂
2. «Есть идеи?» … да, используйте вместо этого встроенные всплывающие подсказки bootstrap — getbootstrap.com/docs/4.1/components/tooltips . (Причина вашей проблемы в том, что tooltip.js разметка / CSS конфликтует с материалами в bootstrap CSS. Но если вы уже используете bootstrap, который предоставляет всплывающие подсказки, то на самом деле нет особого смысла добавлять еще одну библиотеку).
3. Просмотрев некоторые другие значения в инспекторе, я обнаружил, что при включенном bootstrap.css значение непрозрачности было установлено равным 0. Я справился с этим, вручную установив непрозрачность .tooltips равной 1. Но это всего лишь некоторый обходной путь
4. ДА. Вместо этого просто используйте всплывающие подсказки bootstrap
Ответ №1:
Причина вашей проблемы в том, что всплывающая подсказка конфликтует с bootstrap CSS. Вы можете легко решить конфликт, просто добавив 2 простых CSS.
Вам нужно добавить opacity: 1; on tooltip class и background-color: transparent; на tooltip-inner class, чтобы получить тот же результат, что и до добавления bootstrap.
Вот codepen с этими обновлениями: https://codepen.io/sasiddiqui/pen/oNxzBMe
Комментарии:
1. Большое вам спасибо, Сами Ахмед Сиддики. Это именно то решение, которое я искал.