Estou usando o jQuery.Gantt em um projeto e preciso fazer diversas customizações.
Uma das customizações é ao passar o mouse sobre um elemento (em azul) exibir um tooltip.
O problema é que há uma div que marca os finais de semana que está sobrepondo os elementos do gantt (itens em azul).
Se eu alterar o z-index dos elementos em azul eles vão sobrepor o cabeçalho de dias e mês no scroll horizontal.
Estou tentando buscar uma forma de colocar a div que destaca os finais de semana com z-index 0, os elementos em azul com z-index 1 e o cabeçalho com z-index 2, dessa forma, posso colocar o evento mouseover nos elementos em azul e exibir um tooltip.
Na estrutura que está o html seria possível conseguir este posicionamento?
.dataPanel {
outline: 1px solid #DDD;
background-position-y: 15px;
background-size: 30px 48px;
background-image: linear-gradient(to left, rgba(153, 152, 153, 0.7) 1px, transparent 1px), linear-gradient(0deg, #E7ECEF 0%, #E7ECEF 53%, #ECF1F4 53%, #ECF1F4 100%);
background-repeat: repeat;
position: relative;
font-family: 'Verdana, sans-serif';
}
.header {
position: sticky;
top: 0;
z-index: 600;
width: 241px;
background: #fff;
height: 63px;
}
.row {
float: left;
height: 24px;
line-height: 24px;
margin: 0;
}
.dayPosition {
top: 46px;
}
.monthPosition {
top: 15px;
}
.day {
background-color: #fff;
width: 24px;
line-height: 24px;
text-align: center;
border-bottom: 1px solid #DDD;
border-right: 1px solid #DDD;
font-size: 10px;
color: #007E7A;
}
.row .sa,
.row .sn,
.row .wd {
height: 24px;
text-align: center;
width: 29px;
}
.bar {
background-color: #D0E4FD;
height: 18px;
margin: 0 3px 3px 0;
position: absolute;
text-align: center;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.25) inset;
border-radius: 3px;
}
<div class="dataPanel" style="width: 27540px; height: 732px;">
<div class="header">
<div class="row header monthPosition">
JAN
</div>
<div class="row header dayPosition">
<div class="row day wd" id="dw-1559098800000" data-repdate="1559098800000">
<div class="fn-label">WED</div>
</div>
<div class="row day wd" id="dw-1559185200000" data-repdate="1559185200000">
<div class="fn-label">THU</div>
</div>
<div class="row day wd" id="dw-1559271600000" data-repdate="1559271600000">
<div class="fn-label">FRI</div>
</div>
<div class="row day sa" id="dw-1559358000000" data-repdate="1559358000000">
<div class="fn-label">SAT</div>
<div style="background-color: rgba(100, 100, 100, 0.1); height: 673px; width: 30px; bottom: 0px; top: 245px; position: initial;"></div>
</div>
<div class="row day sn" id="dw-1559444400000" data-repdate="1559444400000">
<div class="fn-label">SUN</div>
<div style="background-color: rgba(100, 100, 100, 0.1); height: 673px; width: 30px; bottom: 0px; top: 245px; position: initial;"></div>
</div>
<div class="row day wd" id="dw-1559530800000" data-repdate="1559530800000">
<div class="fn-label">MON</div>
</div>
<div class="row day wd" id="dw-1559617200000" data-repdate="1559617200000">
<div class="fn-label">TUE</div>
</div>
<div class="row day wd" id="dw-1559703600000" data-repdate="1559703600000">
<div class="fn-label">WED</div>
</div>
</div>
</div>
<div class="bar" style="top: 63px; left: 90px; width: 29px;">
<div class="fn-label">24</div>
</div>
<div class="bar" style="top: 63px; left: 120px; width: 29px;">
<div class="fn-label">24</div>
</div>
<div class="bar" style="top: 63px; left: 150px; width: 29px;">
<div class="fn-label">24</div>
</div>
<div class="bar" style="top: 63px; left: 180px; width: 29px;">
<div class="fn-label">24</div>
</div>
</div>