0

私は、primeng の p-fullCalendar のツールチップ機能を実装しています。特定のカレンダー エントリのツールヒントを表示するには、そのエントリの子 div を追加し、ツールヒントのように見えるようにスタイルを設定します。問題は、child-div 要素 (ツールヒント) が他のカレンダー エントリをオーバーレイしないことです。列に複数の要素がある場合、ツールチップは列の最後の要素に対してのみ表示されます (赤い要素にカーソルを合わせた場合のみ)。

ツールチップが表示されます

黄色とピンクの要素では見えません。

ツールチップが見えない

ツールチップ クラスの z-index を 10000 に、カレンダーの z-index を 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

4

0 に答える 0