Блог

Главная - Вопросы по программированию - Как сделать так, чтобы всплывающая подсказка в p-FullCalendar primeng отображалась поверх записей календаря?

Как сделать так, чтобы всплывающая подсказка в p-FullCalendar primeng отображалась поверх записей календаря?

#css #fullcalendar #tooltip #primeng #primeng-calendar

Вопрос:

Я реализую функцию всплывающей подсказки для p-FullCalendar primeng. Чтобы отобразить всплывающую подсказку для определенной записи календаря, я добавляю дочерний элемент этой записи и оформляю его так, чтобы он выглядел как всплывающая подсказка. Проблема в том, что дочерний элемент div (всплывающая подсказка) не накладывается на другие записи календаря. Если в столбце несколько элементов, всплывающая подсказка отображается только для последнего элемента в столбце (только при наведении курсора на красный элемент).:

видна всплывающая подсказка

Он невидим для желтых и розовых элементов.

невидимая подсказка

Я установил z-индекс для класса всплывающих подсказок на 10000, а для календаря на 1, но он не работает.

Соответствующие части кодекса:

  1. CSS календаря:
 .fc
  z-index: 1
.fc *
 z-index: 1
  1. HTML-подсказка:
 <div class="tt">Tooltip</div>
  1. Всплывающая подсказка CSS:
 .tt  
  width: 100%
  color: white
  z-index: 10000 !important
  min-height: 100px 
  border: 3px solid red 
  background-color: black 
  text-align: center
  border-radius: 6px
  padding: 5px 5px
  position: relative
  opacity: 1
  top: 100%
  border-width: 5px

Для добавления и удаления элементов я использую следующую суть: https://gist.github.com/reed-lawrence/1f6b7c328ad3886e60dc2b0adcf75a97

Метки: ,