如何使primeng的p-fullCalendar中的工具提示出现在日历条目的顶部？

编程问答 2022-05-18

问题描述

我正在为primeng 的p-fullCalendar 实现一个工具提示功能。为了显示特定日历条目的工具提示，我添加了该条目的子 div 并设置样式，使其看起来像一个工具提示。问题是 child-div 元素（工具提示）不会覆盖其他日历条目。 如果一列中有多个元素，则工具提示仅对列中的最后一个元素可见（仅当我将鼠标悬停在红色元素上时）：

tooltip is visible

黄色和粉色元素不可见。

tooltip invisible

我将工具提示类的 z-index 设置为 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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

fullcalendarprimengprimengprimeng-calendartooltiptooltiptooltip